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

Question

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

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

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

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

103

javascript html jquery scroll lazy-loading

Источник

user87015 25 фев '11 в 12:50

10 ответов

Решение

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

Примечание. Это решение является быстрым и простым в реализации, но, конечно, не очень хорошим для производительности. Обязательно посмотрите новый https://w3c.github.io/IntersectionObserver/, упомянутый Apoorv и объясненный developer.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="

16

Источник

user3377049 03 мар '17 в 11:05

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

JQuery Sonar

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

10

Источник

user7675 25 фев '11 в 14:22

Теперь вы можете использовать loading="lazy"на изображениях, а также на фреймах, чтобы отложить загрузку до тех пор, пока пользователь не прокрутит до этого элемента.

      <img src="http://placeimg.com/640/360/any" loading="lazy" />

Как указано в MDN:

Атрибут загрузки Атрибут загрузки элемента (или атрибут загрузки элемента ) можно использовать, чтобы указать браузеру отложить загрузку изображений/iframe, находящихся за пределами экрана, до тех пор, пока пользователь не прокрутит их до нужного места.

Могу ли я использовать?

Вы можете использовать изображения во всех современных браузерах, но на данный момент фреймы являются экспериментальными.

5

Источник

user4813913 14 май '22 в 00:50

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

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

Событие привязано к прокрутке окна
```
$(window).scroll(myInfinteScrollFunction);
```
Вызываемая функция проверяет, больше ли верхняя прокрутка, чем размер окна
```
function myInfiniteScrollFunction() {  
    if($(window).scrollTop() == $(window).height())  
    makeAjaxRequest();  
}
```
Делается AJAX-запрос, указывающий, с какого результата # начинать, сколько нужно захватить, и любые другие параметры, необходимые для извлечения данных.
```
$.ajax({
    type: "POST",
    url:  "myAjaxFile.php",
    data: {"resultNum": 30, "numPerPage": 50, "query": "interesting%20icons" },
    success: myInfiniteLoadFunction(msg)
});
```
Ajax возвращает некоторый (наиболее вероятный формат JSON) контент и передает его в функцию loadnig.

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

5

Источник

user489230 25 фев '11 в 13:11

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

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

3

Источник

user362271 29 авг '17 в 18:48

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

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

1

Источник

user96729 17 янв '14 в 21:45

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

0

Источник

user754494 14 ноя '17 в 21:58

Если вы уже разрабатываете веб-приложения с помощью TinyMCE, вы, вероятно, сталкивались с рядом доступных API-интерфейсов, особенно с веб-API, которые интегрируются с редактором форматированного текста и изменяют его поведение. Мы хотим, чтобы редактор форматированного текста Tiny был достаточно гибким для различных случаев использования. Большая часть этого дает вам четкие объяснения и примеры API.

0

Источник

09 июн '21 в 07:28

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

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

Источник

user2768919 12 апр '18 в 18:51

Другие вопросы по тегам javascript html jquery scroll lazy-loading

user426996 25 фев '11 в 13:18 2011-02-25 13:18 · Accepted Answer · 2011-02-25 13:18

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

Plugin

демонстрация

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

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

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