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

jQuery Sonar

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

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

Я никогда не программировал его сам, но я бы предположил, что это так работает.

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.

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

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

Примечание - это решение быстро и легко реализовать, но, конечно, не очень хорошо для производительности. Обязательно загляните в новый Пересечение Наблюдателя как отметил Apoorv и пояснил разработчиков.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="

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

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

швейцарский армейский нож изображения ленивая загрузка Юи ImageLoader.

потому что это больше, чем просто наблюдение за положением прокрутки.

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

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

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. Вы также можете вставлять заполнители, используя обычный атрибут src img.

<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