Я заметил это на многочисленных «современных» веб-сайтах (например, в Facebook и поиске изображений в Google), где изображения под складкой загружаются только тогда, когда пользователь прокручивает страницу вниз достаточно, чтобы поместить их в видимую область области просмотра ( при просмотре источника на странице отображается X количество <img>тегов , но они не получены с сервера сразу ). Как называется этот метод, как он работает и в скольких браузерах работает. И есть ли плагин jQuery, который может добиться такого поведения с минимальным кодированием.

редактировать

Бонус: может кто-нибудь объяснить, есть ли событие onScrolledIntoView или подобное для элементов HTML. Если нет, то как эти плагины работают?

Некоторые из ответов здесь для бесконечной страницы. Салман спрашивает о ленивой загрузке изображений.

Плагин

Демо

РЕДАКТИРОВАТЬ: Как работают эти плагины?

Это упрощенное объяснение:

1. Найдите размер окна и найдите положение всех изображений и их размеры
2. Если изображение выходит за пределы размера окна, замените его заполнителем того же размера.
3. Когда пользователь прокручивает вниз, а положение изображения <прокрутка + высота окна, изображение загружается

Дэйв Арц из AOL в прошлом году на конференции jQuery в Бостоне подробно рассказал об оптимизации. AOL использует инструмент под названием Sonar для загрузки по запросу в зависимости от положения прокрутки. Проверьте код, чтобы узнать, как он сравнивает scrollTop (и другие) со смещением элемента, чтобы определить, видна ли часть или весь элемент.

jQuery Sonar

Дэйв рассказывает о Sonar на этих слайдах . Сонар начинается на слайде 46, а общее обсуждение «нагрузки по запросу» начинается на слайде 33.

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

Примечание. Это решение быстро и легко реализовать, но, конечно, не очень хорошо для производительности. Обязательно посмотрите на новый Intersection Observer, упомянутый Апурвом и объясненный разработчиками Google , если производительность является проблемой.

JQuery

$(window).scroll(function() {
    $.each($('img'), function() {
        if ( $(this).attr('data-src') && $(this).offset().top < ($(window).scrollTop() + $(window).height() + 100) ) {
            var source = $(this).data('src');
            $(this).attr('src', source);
            $(this).removeAttr('data-src');
        }
    })
})

Пример HTML-кода

<div>
    <img src="" data-src="pathtoyour/image1.jpg">
    <img src="" data-src="pathtoyour/image2.jpg">
    <img src="" data-src="pathtoyour/image3.jpg">
</div>

Объяснил

При прокрутке страницы проверяется каждое изображение на странице.

$(this).attr('data-src') - если изображение имеет атрибут data-src

и как далеко эти изображения находятся от нижней части окна ..

$(this).offset().top < ($(window).scrollTop() + $(window).height() + 100)

настройте + 100 на то, что вам нравится (например, - 100)

var source = $(this).data('src');- получает значение data-src=URL-адреса изображения

$(this).attr('src', source); - помещает это значение в src=

$(this).removeAttr('data-src'); - удаляет атрибут data-src (чтобы ваш браузер не тратил ресурсы на то, чтобы возиться с уже загруженными изображениями)

Добавление в существующий код

Чтобы преобразовать ваш html, в редакторе просто найдите и замените src="наsrc="" data-src="

Есть довольно приятный плагин бесконечной прокрутки здесь

Я никогда не программировал сам, но могу представить, как это работает.

1. Событие привязано к прокрутке окна

   $(window).scroll(myInfinteScrollFunction);

2. Вызываемая функция проверяет, превышает ли верх прокрутки размер окна.

   function myInfiniteScrollFunction() {  
       if($(window).scrollTop() == $(window).height())  
       makeAjaxRequest();  
   }

3. Выполняется запрос AJAX, указывающий, с какого результата # начать, сколько получить, и любые другие параметры, необходимые для получения данных.

   $.ajax({
       type: "POST",
       url:  "myAjaxFile.php",
       data: {"resultNum": 30, "numPerPage": 50, "query": "interesting%20icons" },
       success: myInfiniteLoadFunction(msg)
   });

4. Ajax возвращает некоторый контент (скорее всего, в формате JSON) и передает его в функцию loadnig.

Надеюсь, это имеет смысл.

Ленивая загрузка изображений путем присоединения слушателя к событиям прокрутки или использования setInterval очень неэффективна, поскольку каждый вызов getBoundingClientRect () заставляет браузер изменять макет всей страницы и вносит значительный урон на ваш сайт.

Используйте Lozad.js (всего 569 байт без зависимостей), который использует IntersectionObserver для ленивой загрузки изображений.

Швейцарский армейский нож для отложенной загрузки изображений - ImageLoader от YUI .

Потому что проблема не только в наблюдении за положением прокрутки.

Эта ссылка работает для меня демо

1. Загрузите плагин jQuery loadScroll после библиотеки jQuery, но до закрывающего тега body.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script><script src="jQuery.loadScroll.js"></script>

2. Добавьте изображения на свою веб-страницу с помощью атрибута Html5 data-src. Вы также можете вставлять заполнители, используя обычный атрибут img src.

<img data-src="1.jpg" src="Placeholder.jpg" alt="Image Alt"><img data-src="2.jpg" src="Placeholder.jpg" alt="Image Alt"><img data-src="3.jpg" src="Placeholder.jpg" alt="Image Alt">

3. Вызовите плагин по тегам img и укажите продолжительность эффекта fadeIn, когда ваши изображения будут видны

$('img').loadScroll(500); // in ms

Я использую jQuery Lazy . У меня ушло около 10 минут на тестирование и час или два, чтобы добавить к большинству ссылок на изображения на одном из моих веб-сайтов ( CollegeCarePackages.com ). У меня НЕТ (нет / ноль) никаких отношений с разработчиком, но это сэкономило мне много времени и в основном помогло улучшить наш показатель отказов для мобильных пользователей, и я это ценю.