Как сделать отложенную загрузку без плагинов?

Здравствуйте!
Пытаюсь реализовать отложенную загрузку изображений без плагинов, на тестовом сайте wordpress. Сделал следующее:
1. Поставил jquery.min.js в хейдер в первую очередь, далее скрипт отложенной загрузки jquery.lazyload.min.js
2. В подвале разместил js скрипт:
$(function() {

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

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

$(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;
		});
	});
});

});

3. В функции темы разместил код:
// Атрибуты для изображений внутри поста

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);

и такой
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;
}

В результате при загрузке нового изображения в статье, оно загружается как миниатюра и нормально срабатывает отложенная загрузка, но пропадает адаптивная верстка. Если ставить изображение большое в настройках при загрузке, то возвращается адаптивная верстка, но не срабатывает отложенная загрузка.
Подскажите, кто знает
1. Как в PHP код добавить функцию wp_get_attachment_image_srcset() чтобы срабатывала отложенная загрузка в адаптивной верстке.
2. В скрипте размещенном в футуре не срабатывает отложенная загрузка на видео, что не так?
3. Можно ли как то автоматом изменить существующие на сайте изображения, чтобы грузились отложено (подставлялись необходимые атрибуты отложенной загрузки)?
Вот ссылка на тестовый сайт
Тестовый сайт

В открытом коде страницы видно, что если изображение грузится адаптивное, то не подставляются все необходимые данные из PHP функции.
<img class="aligncenter wp-image-34 size-large lazy" title="" src="http://mysaita.ru/mgtex/wp-content/plugins/home/u55576/mysaita.ru/www/mgtex/wp-content/themes/modality/functions/loading-rect.gif" alt="Текстиль для гостиниц" width="1024" height="384" data-original="http://mysaita.ru/mgtex/wp-content/uploads/2018/09/textel-dly-gostinic-1024x384.jpg" /><br />
&nbsp;<br />
<img class="lazy aligncenter wp-image-40 size-large" src="http://mysaita.ru/mgtex/wp-content/uploads/2018/09/textile-polotenca-1024x384.jpg" alt="Текстиль полотенца" width="1024" height="384" data-original="http://mysaita.ru/mgtex/wp-content/uploads/2018/09/textile-polotenca-1024x384.jpg" srcset="http://mysaita.ru/mgtex/wp-content/uploads/2018/09/textile-polotenca-1024x384.jpg 1024w, http://mysaita.ru/mgtex/wp-content/uploads/2018/09/textile-polotenca-300x113.jpg 300w, http://mysaita.ru/mgtex/wp-content/uploads/2018/09/textile-polotenca-150x56.jpg 150w, http://mysaita.ru/mgtex/wp-content/uploads/2018/09/textile-polotenca-768x288.jpg 768w, http://mysaita.ru/mgtex/wp-content/uploads/2018/09/textile-polotenca.jpg 1600w" sizes="(max-width: 1024px) 100vw, 1024px" /><br />

Из кода страницы видно, что в первом случае все необходимые атрибуты подставляются и все срабатывает, кроме адаптивной верстки, а во втором отложенная загрузка не работает.
Всем заранее спасибо.
  • Вопрос задан
  • 359 просмотров
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы