Значение scrollHeight для div, содержащего изображения

0

Вот div, содержащий изображения, с max-height: 300px. Всякий раз, когда требуется полоса прокрутки (здесь и здесь), я хочу добавить второй div (серый) рядом с первым. Я использую scrollHeight для проверки наличия полосы прокрутки.

<div class="container">
    <div class="pictures">
        <img src="test1.jpg" /> <img src="test2.jpg" /> <img src="test3.jpg" /> <img src="test4.jpg" />
        <img src="test5.jpg" /> <img src="test6.jpg" /> <img src="test7.jpg" /> <img src="test8.jpg" />
        <img src="test9.jpg" /> <img src="test10.jpg" /> <img src="test11.jpg" /> <img src="test12.jpg" />
        <img src="test13.jpg" /> <img src="test14.jpg" /> <img src="test15.jpg" /> <img src="test16.jpg" />
        <img src="test17.jpg" /> <img src="test18.jpg" /> <img src="test19.jpg" /> <img src="test20.jpg" />
        <img src="test21.jpg" /> <img src="test22.jpg" />
    </div>
    <div class="scroll"></div>
</div>

Некоторые CSS:

div.container {
        width: 410px;
        max-height: 300px;
        overflow: auto;
    }
    div.container div.pictures {
        float: left;
        width: 390px;
    }
    div.container div.scroll {
        display: none;
        float: left;
        width: 30px;
        background-color: #eee;
    }

И JS:

$(function() {
    $(".scroll").each(function() {
        var iParentHeight = $(this).parent()[0].scrollHeight;
        if (iParentHeight > $(this).parent().css("max-height").replace(/[^-\d\.]/g, '')) {
            var iWidth = $(this).parent().width()+$(this).width();
            $(this).parent().css("width", iWidth);
            $(this).show();
            $(this).height(iParentHeight);
        }
    });
});

На Firefox это работает. Однако в Chrome и Safari существует некоторая проблема: иногда (на самом деле, большую часть времени для Safari) серое погружение не появляется, когда нужно.

Я сделал несколько тестов: без изображений, с X-временем одного и того же изображения и с X различными изображениями. Проблема возникает только при наличии X разных изображений (может быть, проблема с загрузкой?).

Фактически, вывод scrollHeight не всегда одинаковый в Chrome и Safari. Для FF я всегда получаю тот же результат.

Любая идея была бы оценена!

Изменение: забыли ссылку с примера: http://toolboxebz.free.fr/test_scroll/test.html

  • 0
    Я думаю, изображения должны быть полностью загружены перед вызовом скрипта, обработчик DOM ready этого не ждет. Окно onload выполнит или лучше проверит конкретные изображения для полной загрузки, используя соответствующие события onload
  • 0
    окно загружается нормально, спасибо большое!
Теги:
safari

1 ответ

0

Я думаю, что вы должны обернуть вашу js-функцию в document.ready или использовать что-то вроде imageloaded, поскольку вы сказали, что поведение не является детерминированным, что из-за того, что при запуске вашей функции изображения могут быть еще не полностью загружены в браузере,

  • 0
    Спасибо за Ваш ответ. document.ready уже там, хотя в сокращенной версии $. Но комментарий А. Вольфа все равно решил мою проблему!
  • 0
    Вы правы, я это пропустил :)

Ещё вопросы

Сообщество Overcoder
Наверх
Меню