「背景画像も遅延読み込みが可能な万能Lazyloder」として以前別の記事で使い方を紹介した「lazysizes」の、実行タイミングを変更する方法です。
先日、ファッションECサイトを制作している時にWodpessのWP_Queryなどでループをたくさん回すと、ループ内の画像が一部のみ表示がされないという不具合が起きました。
原因はよくわかりませんが、lazysizesの実行タイミングを表題の通りに遅らせてみると画像が無事に全て表示されるようになったので、その時の備忘録です。
目次
プラグインのスクリプトファイルを書き換える
まずはminify化されていない方のスクリプトファイル、lazysizes.jsで試してみましょう。
このファイルを見ると、冒頭部分に処理を実行している記述があります。
lazysizes.jsファイルの中身
(function(window, factory) {
var lazySizes = factory(window, window.document);
window.lazySizes = lazySizes;
if(typeof module == 'object' && module.exports){
module.exports = lazySizes;
}
}(window, function l(window, document) { /* ... */
(おそらくですが、2行目の「var lazySizes = factory(window, window.document);」が実行関数の呼び出し。）
lazyload実行部分をwindowのloadイベントに追加
実行部分が分かったので、あとは先ほどの2~6行目ほどを windowのloadイベントに追加していきます。
(function(window, factory) {
if( window.addEventListener ){
window.addEventListener( 'load', doLazy, false );
}else if( window.attachEvent ){
window.attachEvent( 'onload', doLazy );
}else{
window.onload = doLazy;
}
//元の2~6行目を関数として定義し、一まとめに
function doLazy(){
var lazySizes = factory(window, window.document);
window.lazySizes = lazySizes;
if(typeof module == 'object' && module.exports){
module.exports = lazySizes;
}
};
}(window, function l(window, document) {/* ... */ jQueryを導入しているのであれば、$(window).on('load')を用いて、
(function(window, factory) {
$(window).on('load', function(){
var lazySizes = factory(window, window.document);
window.lazySizes = lazySizes;
if(typeof module == 'object' && module.exports){
module.exports = lazySizes;
}
});
}(window, function l(window, document) {/* ... */ としてもOK。
一応、lazysizesはjQueryがなくても動作するというのが良さの一つですので、jQueryは使わない方がいいかとは思います。
以上のようにすれば、lazysizesの実行タイミングをページ読み込み時まで遅らせることができます。
