it-roy-ru.com

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

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

Правка

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

92
Salman A

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

Плагин

Демо

Правка: Как работают эти плагины?

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

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

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

JQuery Sonar

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

10
Annika Backstrom

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

Note - Это решение быстрое и простое в реализации, но, конечно, не очень хорошее для производительности. Обязательно загляните в новый Intersection Observer , как упомянуто Apoorv и объяснено developers.google , если производительность является проблемой.

The 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="

5
Hastig Zusammenstellen

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

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

  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.

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

5
jwegner

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

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

2
Apoorv Saxena

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

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

1
Arnaud Meuret

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

1. Загрузите плагин loadScroll для jQuery после библиотеки 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 и укажите продолжительность эффект исчезновения, когда ваши изображения появляются

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

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

0
Cliff Ribaudo