メニュー

WEBMEMOする。とあるクリエイターの個人的な備忘録。

「背景画像も遅延読み込みが可能な万能Lazyloder」として以前記事に使い方をまとめた「lazysizes」の、実行タイミングを変更する方法です。

以前、ファッションサイトを制作している時にWodpessのWP_Queryなどでループをたくさん回すと、ループ内の画像だけ一部表示がされないという不具合が起きました。

lazysizesのデフォルトの実行タイミングとphpのループのタイミングの問題かなと思い、lazysizesの実行タイミングを遅らせてみると画像が無事に表示されるようになったので、その時の備忘録です。

*不具合の原因が本当にlazysizesの実行タイミングとphpのループのタイミングが関係していたのかどうかは不明です。

lazysizesについての基本的な使用方法は以下をご覧ください。

目次

    変更場所

    lazysizes.js」 を開きます。ファイルを見るとlazysizesは即時関数として記述されています。(「即時関数」という表現が間違ってたらすみません)

    冒頭部分に実際の処理を実行する記述があります。

    (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);」が実行部分です。

    実行処理部分を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’) や$(window).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だと思います。

    jQueryの記述を使用するならjQuery自体の読み込み順にも注意してください。

    一応、lazysizesはjQueryがなくても動作するというのが良さの一つですので、個人的にはjQueryの記述を使わず、前者の記述方法を選択しました。なので、jQueryを用いた記述の方は動作確認はしておりません。

    以上のようにすれば、lazysizesの実行タイミングをページ読み込み時まで遅らせることができます。

     

    もしかするとオプションの使い方や、bx-Sliderとかみたいにオプションの選択とともに実行タイミングも自由に変えれるかもしれません。(方法を知っている方がいれば是非教えてください。笑)

    今回は、とりあえずソースファイルを直接いじってみました。

    - Thank you for reading this to the end. -

    コメントする

    CAPTCHA


    TOPへ Top