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

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

HIT

11.02.2016

6670

13

Если на странице есть несколько изображений или есть изображения дублирующиеся на всех страницах (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 начинают появляться новые загруженные изображения.
Примеры:

Games__038484_ Sara-Carrigan hD6X8CJsQkA cropped-britney_02 Девушка лежит на пальме cropped-britney_02 girl-wind-balcony-light 63182-asses-bicycles 3291_space

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

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

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

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

  • Похожие записи
  • Комментарии
  • Вложения
Новинка (товар NEW полем)

Новинка (товар NEW полем)

Ранее были рассмотрены варианты добавления лэйбла New полуавтоматическим способом (последние созданные товары, либо по времени от текущего), либо назначением метки NEW. Здесь разберем как сделать данный функционал полем и какие Читать далее »

/
Имитация Ajax загрузки контента

Имитация Ajax загрузки контента

Создадим эффект перехода внутри сайта имитирующий подгрузку контента ajax’ом, как будто без перезагрузки. Принцип эффекта: при переходе по ссылке плавно скрываем изменяемую часть контента, и при загрузке новой плавно ее Читать далее »

Загрузка контента без перезагрузки

Загрузка контента без перезагрузки

Подгрузка контента средствами Ajax Создаем тестовую верстку <p>Какую страницу желаете открыть?</p> <form> <input onclick="showContent('https://opttour.ru/main-rublik/sites/fotofit/')" type="button" value="Страница 1"> <input onclick="showContent('https://opttour.ru/main-rublik/sites/dtex/')" type="button" value="Страница 2"> </form> <div id="contentBody"></div> <div id="loading" style="display: none"> Идет Читать далее »

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

13 комментариев

  1. tstas

    Вроде все сделал, а не работает.
    Видео не срабатывает, в записях картинки тоже не срабатывают.
    Код миниатюр на главной странице срабатывает, происходит подмена class=»lazy wp-post-image», заменяется src и выводится миниатюра в data-original. Только самих картинок на странице не видно (пропали).
    В остальных случаях ни класс не дописывается, не меняются ссылки в src и gata-original. Может что посоветуете?
    Тестовый сайт http://mysaita.ru/mgtex/mgtex.html

    1. Alexandr

      Трудно сходу сказать. Сам скрипт (jquery.lazyload.min.js) в тему загрузили?
      Консоль ошибок jQuery никаких не выдает?

  2. tstas

    Спасибо за ответ! А у Вас работает норм? Вы какой то доп скрипт используете?
    Может тема не стыкуется, утром буду пробовать на дефолтной.

  3. tstas

    Приветствую!
    Не совсем понял куда вставлять прозрачное изображение из первого абзаца, если не сложно, то подскажите пожалуйста.
    а для изображения ставим прозрачное изображение
    src=»https://opttour.ru/wp-content/themes/tester/images/transparant.gif»

    1. Alexandr

      Обязательные условия для работы решения:
      1. Подключить скрипт jquery.lazyload.min.js
      2. Инициализировать скрипт:
      $(function() {
      $(".lazy").lazyload({
      effect : "fadeIn",
      threshold : -200
      });
      });

      3. У изображений должна быть такая конструкция:
      <img class="lazy" width="1000" height="539" data-original="/wp-content/uploads/2016/02/Sara-Carrigan.jpg" />
      Обязательно класс lazy, насчет высоты и ширины не уверен (обязательно или нет), и в data-original путь к самому изображению

      Прозрачное изображение и стиль для lazy это не обязательные моменты.

  4. tstas

    Что то странное происходит, не подставляет теперь пустышку в src выдает вот такой код картинки:
    <p><img class=»lazy aligncenter wp-image-40 size-large» src=»http://mysaita.ru/mgtex/wp-content/uploads/2018/09/textile-polotenca-1024×384.jpg» alt=»Текстиль полотенца» width=»1024″ height=»384″ data-original=»http://mysaita.ru/mgtex/wp-content/uploads/2018/09/textile-polotenca-300×113.jpg» srcset=»http://mysaita.ru/mgt…….</p>
    Ошибок в консоле нет, исправил. Буду думать дальше, Спасибо за ответы.

  5. tstas

    Здравствуйте Александр!
    В принципе все работает, но при загрузке изображений с параметром srcset под адаптивную верстку параметры не подставляются. И функционал не срабатывает.
    У Вас на странице здесь все изображения грузятся с отложенной загрузкой, даже с параметрами srcset, может поделитесь дополнительным функционалом, допишите статью?
    Заранее спасибо.

    1. Alexandr

      Для миниатюр записей, чтобы они подгружались, нужно использовать такую функцию:
      if ( !is_admin() ) {
      add_filter( 'wp_get_attachment_image_attributes', 'lazy_attributes');
      function lazy_attributes( $attr ) {
      $attr['data-original'] = $attr['src'];
      $attr['src'] = plugins_url('/loading-rect.gif', __FILE__);
      $attr['class'] = 'lazy';
      $attr['itemprop'] = 'image';
      $title = get_the_title();
      $atts['title'] = trim(strip_tags( $title ));
      $atts['alt'] = trim(strip_tags( $title ));
      //$attr['srcset'] = ' '; // !Отключение адаптивности изображений
      return $attr;
      }
      }

  6. tstas

    Спасибо!
    Но хотелось бы функцию именно с адаптивной версией, то есть получать данные из srcset
    Чтобы выводились и высчитывались необходимые размеры изображения. А не отключать // !Отключение адаптивности изображений
    Прописал $attr[‘srcset’] = $attr[‘data-original’];
    Выводит ссылку на изображение но не высчитывает и не выводит нужные размеры.
    У Вас на сайте высчитываются размеры и адаптивная верстка присутствует
    <img width=»50″ height=»50″ src=»https://opttour.ru/wp-content/plugins/site-lazyload-image/loading-rect.gif» class=»lazy wp-post-image» alt=»Отложенная загрузка изображений» srcset=»https://opttour.ru/wp-content/uploads/2016/02/liquid-technology-t-virus-50×50.jpg 50w, https://opttour.ru/wp-content/uploads/2016/02/liquid-technology-t-virus-150×150.jpg 150w, https://opttour.ru/wp-content/uploads/2016/02/liquid-technology-t-virus-300×300.jpg 300w, https://opttour.ru/wp-content/uploads/2016/02/liquid-technology-t-virus-180×180.jpg 180w» sizes=»(max-width: 50px) 100vw, 50px» data-original=»https://opttour.ru/wp-content/uploads/2016/02/liquid-technology-t-virus-50×50.jpg» itemprop=»image» title=»Отложенная загрузка изображений» />
    Подскажите каким образом выводите
    Заранее спасибо.

  7. tstas

    А как Вы сделали, что у Вас изображения грузятся отложено с вычислением srcset?
    То есть с адаптивной версткой, не отключая // !Отключение адаптивности изображений
    Поставил в код $attr[‘srcset’] = $attr[‘data-original’];
    выводит изображение, но в одном оригинальном размере
    Заранее спасибо.

    1. Alexandr

      На этом сайте я использую именно ту функцию что я прописал, и отмена srcset там закомментирована.

  8. tstas

    Почему то у меня не выводит адаптивную верстку и атрибут srcset, если строку закомментировать.

  9. tstas

    Супер! Заработало вроде на тестовом сайте. Теперь буду загонять на рабочий!
    Оказался путь к картинке заглушке не верный. 
    Удалил из кодов функционала константу ( __FILE__) 
    и стало открываться в мобильных версиях.
    Большое спасибо за ответы.

Отложенная загрузка изображений Отложенная загрузка изображений Отложенная загрузка изображений Отложенная загрузка изображений
Массовое редактирование свойств товаров
Рекомендации для васМассовое редактирование свойств товаровOpttour.ru
Спасибо! Наш менеджер свяжется с Вами в течении 5 минут.