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，则必须（a）为src属性指定默认图像，并（b）添加实际图像的网址以加载为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 Plugin可以轻松安装 - 只需在插件部分搜索延迟加载。

Answer 3

它是通过以下方式实现的：

add_filter( 'save_post', 'add_lazy_load', 10, 3 ); 
function add_lazy_load($post_id, $post, $update) 
{ 
if (wp_is_post_revision($post_id))
 { 
return; 
} 
if ( ! class_exists( 'DOMDocument', false ) ) 
return; 
remove_action('save_post', 'add_lazy_load'); 
$post_status = get_post_status(); 
if ($post_status != 'draft') 
{ 
$document = new DOMDocument();
$document->loadHTML(mb_convert_encoding($post->post_content, 'HTML-ENTITIES', 'UTF-8')); $images = $document-getElementsByTagName('img'); 
foreach ($images as $image) 
{ 
$image->getAttribute('load'); 
if (!$image->getAttribute('loading') || $image->getAttribute('loading') != 'lazy') 
{ 
$image->setAttribute('loading', 'lazy');
 } 
}
$iframes = $document->getElementsByTagName('iframe'); 
foreach ($iframes as $iframe) 
{ 
$iframe->getAttribute('load'); 
if (!$iframe->getAttribute('loading') || $iframe->getAttribute('loading') != 'lazy') 
{ 
$iframe->setAttribute('loading', 'lazy'); 
} 
} 
$html = $document-saveHTML(); 
wp_update_post(array( "ID" = $post_id, "post_content" => html_entity_decode($html), )); 
} 
add_action('save_post', 'add_lazy_load', 10, 3); 
}

了解更多：https://www.plerdy.com/blog/lazy-loading-setup-wordpress/

Answer 4

这是我刚刚实现的解决方案。将此代码包含在您的JS所在的functions.php目标文件中。

// lazy load
function lazy_load_scripts() { 
    wp_enqueue_script( 'lazy_load', get_template_directory_uri() . '/js/lazyLoad.js');  
}

将其放入所需页面

add_action( 'wp_enqueue_scripts', 'lazy_load_scripts' );

将要进行延迟加载的每个div赋予.lazy-load类

这是一个Java脚本代码

//  on scroll lazy load
 jQuery(window).scroll(function() {    
    let toEasyLoad = jQuery(".lazy-load img");
    toEasyLoad.each(function(element) {
        const top_of_element = jQuery(this).offset().top;
        const bottom_of_screen = jQuery(window).scrollTop() + jQuery(window).innerHeight();

        //change this value if you want images to load much sooner than user comes to the div
        const offset = 100;    
            
        if ((bottom_of_screen + offset > top_of_element) && (jQuery(this).attr("data-src"))) {
            // the element is visible, do something                
                jQuery(this).attr("src", jQuery(this).data('src'));
                jQuery(this).removeAttr('data-src');                     
        }
    })    
});

希望有人会发现它有用。

Wordpress和Lazy加载，我无法让它工作

4 个答案: