SWELL│特定の画像遅延読み込み（Lazy Load）を除外する方法

SWELLでスクリプト(lazysizes.js)を使って遅延読み込みさせるをONにすると、画像の遅延読み込みができます。

しかしWeb制作において、アイキャッチ画像意外にもファーストビューに画像を置く場合は、その遅延読み込みを除外したい時があります。

そんな時に特定の画像の遅延読み込み（Lazy Load）を除去する方法があるので紹介します。

著者

motoki

WEB制作をしているデジタルノマド
WordPressのカスタマイズが好きで、色々と自作しています。

WordPressのカスタマイズに困ったらご相談ください！

WordPressテーマSWELL特化のホー...

カスタマイズの依頼・相談

SWELLで特定の画像の遅延読み込み（Lazy Load）を除外する方法

やり方は簡単です。

スクリプト(lazysizes.js)で画像に付与されるlazyloadedのクラスを除去するだけです。

対象の画像にクラスをつける

遅延読み込みさせたくない画像を選択。

高度な設定から追加CSSSクラスにno-lazyloadという名前のクラスを追加しましょう。

functions.php

続いてJavaScriptを追加します。

管理画面 ＞ 外観 ＞テーマエディタのfunctions.phpを開いて下記のコードを入力しましょう。

function motoki_remove_lazyloaded() {
echo <<< EOM
<script>
window.addEventListener('load', function() {
    const imageElement = document.querySelector('.no-lazyload img.lazyloaded');
    if (imageElement) {
        imageElement.classList.r
emove('lazyloaded');
    }
});
</script>
EOM;
}
add_action('wp_footer', 'motoki_remove_lazyloaded');

以上です。

確認

ページを更新して対象の画像の状態を見てみましょう。

画像のクラスを見て、luminousの横に付与されていたlazyloadedが消えていることが確認できます。

まとめ

SWELLで自作のスライダーやメインビジュアルをファーストビューに設置したときに、画像の遅延読み込みが気になったので作成してみました。

気になった方は是非、試してみてください。