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

Question

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

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

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

Answer 1

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

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

Чтобы использовать его, вызовите lazyload для изображений, как в оригинале, за исключением того, что вам нужно добавить " container " опция с прокручиваемым элементом 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

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

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