Wordpress и Lazy load, я не могу заставить его работать

Question

Я пытаюсь получить ленивую загрузку js, работающую на сайте Wordpress, и не могу за жизнь меня заставить ее работать. Я пробовал плагин, и пока они работают, они ленивы загружают все изображения, и я не могу этого случиться на своей домашней странице (длинная история, но это вызывает проблему с прыжками). Я хочу только ленивые загрузки изображений на определенных страницах. Раньше я просто связывался с файлом js и добавлял класс ленивый к изображениям, которые я хотел, но это явно не сработает. Вот то, что я устал ...

functions.php

function load_lazyload() { 
    wp_register_script('lazyload', get_template_directory_uri() . '/library/js/jquery.lazyload.min.js', array(), '', true); 
    wp_register_script('trigger_lazy', get_template_directory_uri() . '/library/js/lazy_trigger.js', array('jquery', 'lazyload'), '', true); 
    wp_enqueue_script('trigger_lazy'); 
} 
add_action('wp_enqueue_scripts', 'load_lazyload'); 

Затем добавили этот lazy_trigger.js

jQuery(document).ready(function($) { 
$("img.lazy").lazyload({ 
    effect : "fadeIn" 
}); 

});

Затем я добавил класс ленивый к изображениям, которые я хотел загрузить.

Не повезло, что это сработало. Может кто-нибудь объяснить, почему или еще лучше объяснить лучший способ?

Answer 1

Предполагая, что вы используете this jQuery plugin, вы должны (а) указать изображение по умолчанию для атрибута src, и (б) добавить URL фактического изображения для загрузки в качестве атрибута данных html5, например:

foreach($posts as $post) { 
    setup_postdata($post); 
    $src = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID), 'thumbnail', false, ''); 
    $img = '<img class="lazy" src="' . get_template_directory_uri() . '/images/default.png" data-original="' . $src[0] . '" />'; 
    echo $img; 
} 

Answer 2

Существует фактически плагин Wordpress Lazy Load, который легко устанавливается - просто найдите ленивую загрузку в разделе плагинов.