Javascript: Ленивая загрузка изображений в горизонтальном Div?

Question

У меня есть div, в котором есть несколько миниатюр, показывающих горизонтально (с горизонтальной полосой прокрутки). Есть ли способ ленивой загрузки этих миниатюр и показывать их только после того, как пользователь прокручивает по горизонтали до их положения? Все примеры, которые я видел, проверяют окно браузера, а не div.

Это для конкурсных работ, поэтому иногда есть сотни заявок, что резко влияет на производительность.

Заранее спасибо.

Answer 1

Я добавил плагин для отложенной загрузки для jQuery и добавил поддержку для отложенной загрузки изображений в контейнер div. плагин для отложенной загрузки для jQuery теперь поддерживает это напрямую. Не должно быть слишком сложно удалить зависимость от jQuery или адаптировать ее к другой библиотеке, если вам нужно.

Вы можете получить мой раздвоенный проект от github: http://github.com/silentmatt/jquery_lazyload/tree/master.

Чтобы использовать его, вызовите lazyload для изображений так же, как в оригинале, за исключением того, что вам нужно добавить опцию «контейнер» с прокручивающим элементом div. Так что, если ваш HTML выглядит так:

<div id="container" style="width: 765px; overflow: scroll;">
    <img src="image1.jpg" width="765" height="574">
    <img src="image2.jpg" width="765" height="574">
    <img src="image3.jpg" width="765" height="574">
    ...
</div>

вы бы назвали lazyload так:

$("#container img").lazyload({ container: $("#container") });

Answer 2

См. Мой вопрос, где я столкнулся с подобной проблемой. Джейсон Бантинг дал мне удобный небольшой скрипт для загрузки изображений в виде кусков.

Как отобразить состояние загрузки с помощью предварительного загрузчика и нескольких изображений?