画像表示の遅れをなくす

カラーミーSEO+テンプレートには速度対策としてlazyload.jsを採用しています。

 

2.x系のlazyloadにはオプション設定が無い(と思う)ので、既定値で画像の表示遅れはほぼ無いのですが、それも味気ないなということで意図的に表示を0.5秒ずらしています。

 

コンマ5秒なのであまり気にならないとは思いますが、表示時間のずれをなくしたい場合はhtmlファイル(1-common.html : 共通)の中で簡単に修正可能です。

 

lazyloadに関する設定を変更する

表示までの遅れを無効化する

1-common.htmlを文末までスクロールするとjava scriptをいくつか記述しています。

そこに、

//lazyload
window.addEventListener("load", function(event) {
let timeout = setTimeout(function() {
lazyload();
}, 500);
});

という箇所があるのでとりあえず全部削除。

代わりに

lazyload();

だけ記述していただければ完了です。

表示までの遅れを変更する

表示遅れ時間を調整したい場合は、上記の「500」の部分を変更します。

数字の単位はms(ミリ秒)なので、1000 = 1秒です。

2020年3月20日カラーミーカスタマイズjavascript,lazyload,画像

Posted by ミフネWEB