Как загружаются изображения при прокрутке?

Question

Как добиться эффекта, когда изображения загружаются только после прокрутки к этому контенту.Таким образом, если у вас большая страница и в нижней части страницы есть изображения, они никогда не загрузятся, если вы не прокрутите этот контент.Если вы все еще не уверены, просмотрите imdb:

http://www.imdb.com/title/tt1385826/

Дайте странице загрузиться, а затем перейдите к разделу Cast.Вы видите только когда вы прокручиваете браузер делает запрос на изображения и загружаются.Нужно ли мне писать какой-либо специальный код, чтобы это происходило с каждым изображением на моей странице?

Заранее спасибо:)

Answer 1

Я думаю, что вы должны использовать JavaScript;при перемещении области просмотра веб-страницы вы можете рассчитать, когда изображение появится в поле зрения.В это время вы можете поменять местами путь к изображению-заполнителю к правильному изображению.

Вот страница с некоторыми пояснениями: они используют этот плагин jQuery

Answer 2

Существует плагин jQuery под названием LazyLoad, похоже, что оригинальный автор прекратил разработку, но есть несколько запросов на извлечение на GitHub, которые выглядят так, как будто они решают проблемы, о которых автор упоминал как проблемы1003 *http://www.appelsiini.net/projects/lazyload

https://github.com/tuupola/jquery_lazyload/pulls

Answer 3

Вместо того, чтобы загружать все изображения одновременно, вы пишете свой код так, что загружаете только столько, сколько может показать страница (скажем, 20). Затем при прокрутке (при достижении нижней части страницы) вы можете выполнить ajax-вызов, чтобы загрузить следующие 20 изображений и добавить их к существующей HTML-странице.