Javascript: ленивая загрузка изображений в горизонтальном Div?
У меня есть div, в котором есть несколько миниатюр, отображаемых по горизонтали (с горизонтальной полосой прокрутки). Есть ли способ лениво загружать эти миниатюры и показывать их только после того, как пользователь горизонтально прокручивает их до их положения? Все примеры, которые я видел, проверяют окно браузера, а не div.
Это для конкурсных работ, поэтому иногда появляются сотни заявок, что сильно влияет на производительность.
Заранее спасибо.
Ответы 2
См. Мой вопрос, где я столкнулся с подобной проблемой. Джейсон Бантинг дал мне удобный небольшой скрипт для загрузки изображений по частям:
Как отобразить статус загрузки с предварительным загрузчиком и несколькими изображениями?
Я раздвоил плагин ленивой загрузки для 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") });
Быстрый вопрос: похоже, это не работает в IE, это известная проблема?
Я думаю, проблема заключалась в том, что событие загрузки не запускалось, когда изображения загружались слишком быстро. Я изменил его, чтобы он установил атрибут src после привязки события к загрузке, поэтому теперь он должен работать.
Спасибо! Я уже давно за это выдергиваю волосы!