0

私はワードプレスサイトで遅延ロードjsを動作させようとしていますが、私の人生ではそれを動作させることはできません. プラグインを試してみましたが、動作中にすべての画像が遅延読み込みされ、ホームページでそれを行うことができません (長い話ですが、ジャンプの問題が発生します)。特定のページの画像だけを遅延読み込みしたい。以前は、単に js ファイルにリンクして、必要な画像にクラス lazy を追加するだけでしたが、明らかにうまくいきません。ここで私が疲れたのは...

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

});

次に、読み込みたい画像にクラス lazy を追加しました。

これを機能させるのは運が悪い。誰かが理由を説明できますか、それとももっと良い方法を説明できますか?

4

4 に答える 4

0

この jQuery プラグインを使用していると仮定すると、(a) 属性のデフォルトの画像を指定し、src(b) 実際の画像の 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;
}
于 2013-05-21T00:34:37.517 に答える
0

実際には、簡単にインストールできる wordpress Lazy Load Plugin があります。プラグイン セクションで lazy load を検索するだけです。

于 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 に答える