WordPress5.5から画像に追加されるようになったネイティブLazy Loadを無効化する方法

WordPress5.5から画像に追加されるようになったネイティブLazy Loadを無効化する方法

WordPress5.5から画像に追加されるようになったネイティブLazy Loadを無効化する方法

WordPress5.5から、画像に「loading=”lazy”」という属性が追加されるようになりました。

<img loading="lazy" width="800" height="423" src="https://example.com/wp-content/uploads/2020/08/sample.jpg" alt="" class="wp-image-8" srcset="https://example.com/wp-content/uploads/2020/08/sample.jpg 800w, https://example.com/wp-content/uploads/2020/08/sample-300x159.jpg 300w, https://example.com/wp-content/uploads/2020/08/sample-768x406.jpg 768w" sizes="(max-width: 800px) 100vw, 800px">

「loading=”lazy”」が追加されることで、画像が遅延読み込みされるようになります。これはネイティブLazy Loadと呼ばれていて、JavaScriptを使わなくても遅延読み込みが実装でき、各主要ブラウザでサポートされています。

サポートされていないブラウザでは、エラーが起こるというわけではなく「loading=”lazy”」が付いていても無視されるだけです。特別な理由がない限りは、そのままで良いかと思います。

ですが、既にJavaScriptで遅延読み込みを実装済み等、「loading=”lazy”」の追加を無効化したいというケースもあるかもしれません。

そんなわけで、画像に「loading=”lazy”」を追加しないようにする方法をご紹介したいと思います。

WordPress5.5から画像に追加されるようになったネイティブLazy Loadを無効化する方法

適用しているテーマのfunctions.phpに以下1行を追加することで、ネイティブLazy Loadを無効化できます。

add_filter( 'wp_lazy_loading_enabled', '__return_false' );

元のimgタグから「loading=”lazy”」が消えて、以下のようなimgタグが出力されるようになります。

<img width="800" height="423" src="https://example.com/wp-content/uploads/2020/08/sample.jpg" alt="" class="wp-image-8" srcset="https://example.com/wp-content/uploads/2020/08/sample.jpg 800w, https://example.com/wp-content/uploads/2020/08/sample-300x159.jpg 300w, https://example.com/wp-content/uploads/2020/08/sample-768x406.jpg 768w" sizes="(max-width: 800px) 100vw, 800px">

あとがき

JavaScriptの遅延読み込みを使いたいとか、何らかの理由でネイティブLazy Loadを無効化したい時は、ぜひ参考にしていただければと思います。

この記事が気に入ったら
いいね!してね♪

Twitter で

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です