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

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

HIT

11.02.2016

2256

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="https://volt-amper.ru/bastion-3d/10/3D/img3d_000892.html" src="http://skat-st.ru/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;
}

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

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

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

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

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

Тэги:

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

  • Похожие записи
  • Комментарии
  • Вложения
Фильтр Ajax

Фильтр Ajax

Очередная попытка сделать фильтр wordpress, в этот раз применяя технологию ajax. По сути программирование фильтра — это изобретение велосипеда, но есть 2 момента: во-первых в процессе я начинаю лучше понимать Читать далее »

/
Загрузка JavaScript динамически

Загрузка JavaScript динамически

Иногда требуется подгрузить скрипт на лету, в этом поможет технология Ajax. Обычный скрипт JavaScript динамически Создаем файл скрипта script-dinamic.js с содержимым // случайное число от 1 до 100 var rnd Читать далее »

Подгрузка постов «налету» II: Кнопка

Подгрузка постов «налету» II: Кнопка

Данный вариант подгрузки постов «налету» является альтернативой подгрузке постов при скроллинге. Только в данном методе посты будут подгружаться по нажатию на кнопку. Также учтены некоторые особенности шаблона данного сайта высота Читать далее »

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

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__) 
    и стало открываться в мобильных версиях.
    Большое спасибо за ответы.

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