0

我试图让延迟加载 js 在 wordpress 网站上工作，但我一辈子都无法让它工作。我尝试了插件，当它们工作时，它们会延迟加载所有图像，而我不能在我的主页上发生这种情况（说来话长，但它会导致跳跃问题）。我只想在特定页面上延迟加载图像。过去我会简单地链接到 js 文件并将惰性类添加到我想要的图像中，但这显然行不通。这里是我累的...

函数.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"
});

});

然后我将惰性类添加到我想要加载的图像中。

没有运气让这个工作。有人可以解释为什么或更好地解释更好的方法吗？

4

4 回答 4

0

Assuming you are using this jQuery plugin, you'll have to (a) specify a default image for the src attribute, and (b) add the url of the actual image to load as a html5 data attribute, e.g.:

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;
}
于 2013-05-21T00:34:37.517 回答
0

实际上有一个易于安装的 wordpress 延迟加载插件 - 只需在插件部分搜索延迟加载。

于 2013-07-01T22:06:51.393 回答
0

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

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/

于 2020-10-30T15:53:43.090 回答
0

这是我刚刚实施的解决方案。将此代码包含在您的 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');                     
        }
    })    
});

希望有人会发现它有用。

于 2020-10-30T20:53:16.493 回答