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

Question

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

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

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

Answer 1

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

Plugin

Демо

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

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

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

Answer 2

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

jQuery Sonar

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

Answer 3

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

Примечание - Это решение быстрое и простое в реализации, но, конечно, не очень хорошее для производительности.Обязательно посмотрите новый Intersection Observer , как указано Apoorv и объяснено developers.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="

Answer 4

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

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

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.

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

Answer 5

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

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

Answer 6

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

Поскольку эта проблема не просто отслеживает положение прокрутки.

Answer 7

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

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

Answer 8

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