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

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

Подключаем скрипт

<script type="text/javascript" src="<?php bloginfo('stylesheet_directory'); ?>/js/jquery.lazyload.min.js"></script> 

либо

wp_enqueue_script( 'lazyload', get_template_directory_uri() . '/js/jquery.lazyload.min.js' , array( ), '1.6.5' , 'screen' );

Инициализируем функцию, threshold — «порог» при котором изображение появляется (по умолчанию 200, если сделать больше, то будет загружаться быстрее, если сделать меньше, то будет загружаться на экране):

$(function() {
  
$(".lazy").lazyload({
    effect : "fadeIn",
    threshold : -200
});

});

Более подробное руководство по работе с jquery.lazyload.js здесь.

Изображения с отложенной загрузкой должны выглядеть так

<img class="lazy" width="1000" height="539" data-original="https://opttour.ru/wp-content/uploads/2016/02/Sara-Carrigan.jpg" />

Можно использовать для div c атрибутом background-image (в стилях атрибут background-image должен быть отключен)

<div id="underground" data-original="https://opttour.ru/wp-content/uploads/2016/01/underground-pic2.jpg"
 width="1430" height="500" class="lazy"&gt </div&gt

Для имитации loader’a нужно прописать стиль для класса lazy

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

.lazy {
    background-image: url('https://opttour.ru/wp-content/themes/tester/images/lazy-loader.gif');
    background-repeat: no-repeat;
    background-position: center;
    background-color: #fff;
}

а для изображения ставим прозрачное изображение

src="https://opttour.ru/wp-content/themes/tester/images/transparant.gif"

Условия появления

Изображения подгружаются при скроллинге. Но иногда требуется подгрузка изображений при определенных условиях: открытие вкладок в табах, всплывающие окна, в других случаях. Для таких случаев создаем скрипт:

$(".list_tabs2 li").click(function() {
setTimeout(function(){ $(".tab2 .lazy").lazyload({effect : "fadeIn"}); }, 500);
});

В данном примере, изображения подгрузятся и появятся при нажатии на вкладку.

Отложенная загрузка iFrame

Меняем у iFrame src на картинку загрузки, а ссылку на html вставляем в атрибут data-original, также добавляем класс lazy.

<iframe class="lazy" frameborder="0" vspace="0" hspace="0"  scrolling="no" data-original="/bastion-3d/10/3D/img3d_000892.html" src="/wp-content/plugins/site-lazyload-image/loading-rect.gif"&</iframe&

Для работы с iFrame добавляем следующий скрипт, который в определенный момент (по нажатию кнопки #ddd-btn) меняет местами атрибуты data-original и src:

$(document).ready(function() {
	var iframes = $('iframe.lazy');
	$('#ddd-btn').click(function() {
		iframes.attr('src', function() {
			var src = $(this).attr('data-original');
			$(this).removeAttr('data-original');
			return src;
		});
	});
});

Отложенная загрузка для миниатюр

Для всех миниатюр на сайте можно также сделать отложенную загрузку. Код в functions.php

add_filter( 'wp_get_attachment_image_attributes', 'alter_att_attributes_wpse');
function alter_att_attributes_wpse($attr) {
  $attr['data-original'] = $attr['src'];
  $attr['src'] = '/wp-content/themes/tester/images/transparant.gif';
  $attr['class'] = 'lazy';
  $attr['srcset'] = ' ';
  return $attr;
}

Решение не идеальное, т.к. мы отключаем адаптивные размеры изображений.

Вот тут, лучшее решение по замене атрибутов с поддержкой srcset, но и lazyload нужно применять, который это поддерживает.

Вставленные в запись изображения

Можно также сделать с отложенной загрузкой изображения добавляемые в запись. Для этого прописываем функцию, изменяющую стандартную верстку вставки изображений в запись:

// Атрибуты для изображений внутри поста

function rudr_custom_html_template($html, $id, $caption, $title, $align, $url, $size, $alt) {

$loader = plugins_url('/loading-rect.gif', __FILE__);

list( $img_src, $width, $height ) = image_downsize($id, $size);
$hwstring = image_hwstring($width, $height);

$image_thumb = wp_get_attachment_image_src( $id, $size );

if($url){ // if user wants to print the link with image
$out .= '<a href="' . $url . '">';
}
$out .= '<img data-original="'. $image_thumb[0] .'" src="'.$loader.'" alt="'.$alt.'" title="'.$title.'" '.$hwstring.' class="align'.$align.' size-'.$size.' wp-image-'.$id.' lazy"/>';
if($url){
$out .= '</a>';
}
return $out; // the result HTML
}

add_filter('image_send_to_editor', 'rudr_custom_html_template', 1, 8);

Проверить данный принцип (постепенная или отложенная загрузка изображений) можно следующим образом:
При загрузке страницы идем в инструменты разработчика и смотрим подгруженные изображения Application/Frames/top/images
Далее, при перемотке страницы вниз в разделе images начинают появляться новые загруженные изображения.
Примеры:

Новая версия скрипта (2.0 Beta)

Скачал и опробовал новую версию скрипта, хоть она еще Beta, но работает в разы лучше. Пропадают глюки присущие предыдущей версии. Изображения загружаются быстрее, в мобильной версии работает лучше (раньше некоторые изображения не хотели загружаться).

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

Поделиться в соц. сетях: