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

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

HIT

11.02.2016

3183

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.

Тэги:

Поделится информацией с друзьями

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

Фильтр по меткам (изменение основного запроса)

Реализуем фильтрацию записей по меткам путем изменения основного запроса на лету (ajax). Находим все теги записей входящих в категорию Данный код можно вставить в боковую колонку в виде виджета. <?php Читать далее »

/ /
Открывать запись во всплывающем окне

Открывать запись во всплывающем окне

Задача: открывать запись во всплывающем окне используя загрузку «налету» (ajax). При этом работает сколько угодно раз, т.е. при нажатии на другую ссылку — загружается другая запись по ID из ссылки. Читать далее »

Json Начало

Json Начало

JSON (JavaScript Object Notation) — это текстовый протокол обмена данными, чем-то похожий на более привычный XML, но данные записываются в нем более компактно. Изначально он был разработан для нужд JavaScript Читать далее »

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

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

  1. Аватар
    tstas

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

    1. Alexandr
      Alexandr

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

  2. Аватар
    tstas

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

  3. Аватар
    tstas

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

    1. Alexandr
      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
      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
      Alexandr

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

  8. Аватар
    tstas

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

  9. Аватар
    tstas

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

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