Отложенная загрузка изображений

Для отслеживания процесса загрузки нажмите на меню справа (с монитора)

Установка:

Подключаем библиотеку jQuery 1.7.2 + или Zepto 1.1.6 +
Подключаем плагин jquery.lazy.js или jquery.lazy.min.js

jquery.lazy доступен для подключения через cdnjs и jsDelivr CDN:

<!-- jsDeliver -->
<script type="text/javascript" src="//cdn.jsdelivr.net/gh/eisbehr-/jquery.lazy@1.7.10/jquery.lazy.min.js"></script>

1 2	<!-- jsDeliver --> <script type="text/javascript" src="//cdn.jsdelivr.net/gh/eisbehr-/jquery.lazy@1.7.10/jquery.lazy.min.js"></script>

<!-- cdnjs -->
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery.lazy/1.7.10/jquery.lazy.min.js"></script>

1 2	<!-- cdnjs --> <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery.lazy/1.7.10/jquery.lazy.min.js"></script>

Использование:

У картинки вместо атрибута src используем атрибут data-src и добавляем нужный класс:

<img class="lazy" data-src="path/to/image_to_load.jpg" src="" />

1	<img class="lazy" data-src="path/to/image_to_load.jpg" src="" />

Инициализируем скрипт после загрузки страницы к нужному классу:

$(function() {
    $("img.lazy").Lazy();
});

$(function() {

$("img.lazy").Lazy();

});

Пример:

Обратите внимание:

Атрибут src у изображения является не обязательным, но если его нет и у картинки нет размеров, то ее высота будет равна нулю. Соответственно, если 100 таких фотографий будут следовать друг за другом, то все они одновременно окажутся в видимой области и начнут загружаться.

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

<img class="lazy" width="100%" data-src="photo.jpg" src="thumb.jpg" />

1	<img class="lazy" width="100%" data-src="photo.jpg" src="thumb.jpg" />

.lazy {
	filter: blur(5px) grayscale(1);
}

.lazy {

filter: blur(5px) grayscale(1);

}

$(function() {
    $("img.lazy").Lazy({
		threshold: 0,
		effect: 'fadeIn',
		effectTime: 500,
		afterLoad: function(element) {
			element.css("filter", "blur(0) grayscale(0)");
		}
	});
});

$(function() {

$("img.lazy").Lazy({

threshold: 0,

effect: 'fadeIn',

effectTime: 500,

afterLoad: function(element) {

element.css("filter", "blur(0) grayscale(0)");

}

});

Функции обратного вызова:

Плагин Lazy имеет четыре функции обратного вызова, которые срабатывают в разных точках загрузки элемента.

beforeLoad - вызывается прежде чем картинка будет загружена
afterLoad - вызывается после успешной загрузки изображения
onError - вызывается когда картинка не может быть загружена
onFinishedAll - вызывается когда все фотографии загружены или была возвращена ошибка

Пример:

<img class="lazy" data-src="images/1.jpg" />
<img class="lazy" data-src="images/2.jpg" />
...
<img class="lazy" data-src="images/9.jpg" />
<img class="lazy" data-src="images/missing.jpg" />

...

img.lazy {
	width: 700px; 
	height: 467px; 
	display: block;
}

img.lazy {

width: 700px;

height: 467px;

display: block;

}

$(function() {
	$('.lazy').lazy({
		beforeLoad: function(element) {
			var imageSrc = element.data('src');
			console.log('изображение "' + imageSrc + '" начало загружаться');
		},
		afterLoad: function(element) {
			var imageSrc = element.data('src');
			console.log('изображение "' + imageSrc + '" загрузилось');
		},
		onError: function(element) {
			var imageSrc = element.data('src');
			console.log('изображение "' + imageSrc + '" не может быть загружено');
		}
		onFinishedAll: function() {
			console.log('загружены все изображения');
		}
	});
});

$(function() {

$('.lazy').lazy({

beforeLoad: function(element) {

var imageSrc = element.data('src');

console.log('изображение "' + imageSrc + '" начало загружаться');

afterLoad: function(element) {

var imageSrc = element.data('src');

console.log('изображение "' + imageSrc + '" загрузилось');

onError: function(element) {

var imageSrc = element.data('src');

console.log('изображение "' + imageSrc + '" не может быть загружено');

}

onFinishedAll: function() {

console.log('загружены все изображения');

}

});

Настройки:

Имя	Тип	По умолчанию	Описание
name	string	'lazy'	Внутреннее имя, используемое для привязок.
chainable	boolean	true	По умолчанию Lazy является цепочкой и возвращает все элементы. Если установлено значение false, Lazy вернет созданный экземпляр плагина для дальнейшего использования.
autoDestroy	boolean	true	Автоматическое уничтожение экземпляра, когда никакие другие элементы не доступны для обработки..
bind	string	'load'	Если установлено значение `load`, Lazy начнет работать сразу после загрузки страницы. Если нужно использовать собственные события - `event`.
threshold	integer	500	Количество пикселей под видимым окном, при котором начнется загрузка изображений.
visibleOnly	boolean	false	Должны ли загружаться только видимые элементы.
appendScroll	integer	window	Элемент для прослушивания событий прокрутки. Может быть полезен, когда изображения хранятся в контейнере.
scrollDirection	string	'both'	Определяет направление прокрутки. Вертикальная `vertical`, горизонтальная `horizontal` или обе `both`.
imageBase	string	null	Если этот параметр определен, он будет использоваться в качестве базового пути для всех изображений.
defaultImage	string	blank image	Base64 код картинки, который устанавливается в качестве источника изображения `src` и показывается до того как загрузится основная фотография.
placeholder	string	null	Base64 код картинки, который устанавливает фон для каждого элемента в качестве плейсхолдера загрузки.
delay	integer	-1	Если нужно загрузить все элементы сразу после загрузки страницы, можно указать время задержки в миллисекундах.
combined	boolean	false	С помощью этого параметра Lazy будет объединять управление событиями и задержанной загрузкой элементов.
Эффекты
effect	string	'show'	Эффект, который используется для отображения загруженных изображений `show` или `fadeIn`.
effectTime	integer	0	Время эффекта в миллисекундах.
Тротлинг
enableThrottle	boolean	true	Включает тротлинг.
throttle	integer	250	Время в миллисекундах для ограничения вызовов загрузки.

Дополнения:

Дополнения для плагина jquery.lazy рассмотрены в теме: "Отложенная загрузка контента".

Плагин jquery.lazy на сайте авторов
Плагин jquery.lazy на github

Алексей: 15.09.2021 в 04:18

Тема интересная, применил на свой сайт. Но есть вопрос, как это все прикрутить в карусель?

Ответить
- Alexander: 15.09.2021 в 08:02
  
  Через евенты карусели
  
  Ответить
  - Алексей: 15.09.2021 в 13:50
    
    А подробнее и с примером можете подсказать?
    
    Ответить
  - Алексей: 16.09.2021 в 14:56
    
    Александр, прошу показать пример, как подключить отложенную загрузку в карусель используя евент карусели. Заранее благодарю!
    
    Ответить
    - Alexander: 16.09.2021 в 15:04
      
      Когда карусель вращается, происходит событие (евент), какой именно, нужно смотреть документацию карусели.
      И когда это событие происходит, то вызываем Lazy.
      У меня на masonry фильтре вешается на клик (на карусель тоже можно поставить также - на клик по стрелке)
      
      $("img.carousel-lazy").Lazy({ bind: "event", delay: 0 });
      
      Где carousel-lazy класс у фоток карусели.
      
      В итоге у нас получится, что как только карсуль сдвинется, все ее фотографии будут подгружены.
      
      Ответить
      - Mikhail: 21.03.2022 в 19:04
        
        Здравствуйте, скажите пожалуйста.
        Вообще не пойму как правильно делают скрипт ленивой загрузки.
        Вот допустим у вас на сайте в фото нет "data-src".
        Но гугл не ругается что у вас нет ленивой загрузки фото. Как так?
        У меня стоит lazysizes.min.js. Но макет сбивается при ленивой загрузке. Я так понимаю надо заглушку (placeholder). Сколько не читал информации не понятно как это сделать Lazy+placeholder.
        По ваше скрипту, сижу, думаю, думаю. Тестил разные способы. Но так и не получилось реализовать.
        Если вам не сложно. Дайте хоть пару названий или ссылочек как такое сделать.
        
        Ответить
        
        Alexander: 21.03.2022 в 20:36
        
        У меня стоят data-src, только не везде.
        Напишите в телеграм или ВК, попробую обьяснить как это работает все.
        
        Ответить

Консоль

Установка:

Использование:

Пример:

Функции обратного вызова:

Пример:

Настройки:

Дополнения:

Смотрите также:

Добавить комментарий:

Комментарии: