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

2023.10.15

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

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

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

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');

以上です。