IsInViewportはimgをgifに一度変更します

Question

この問題は完全に解決していません。

私の目標は、imgがビューポート内に入ると、imgをgifに変更することです。

私はIsInViewportライブラリを使用しました：https://github.com/zeusdeux/isInViewportとhttp://www.verticalstrategy.com/agile_strategy/（下記参照）に次のコードを実装しました。

誰かが私のブール値が機能しないように見えることがあり、ビューポート内をスクロールするたびにgifがロードされていますか？ここで

jQuery(document).ready(function ($) { 

    gifset = false; 

    if (gifset == false) { 

     $(window).scroll(function() { 

      $(".for-large-device .wpb_wrapper .vc_single_image-wrapper img:in-viewport").attr('src', "http://www.verticalstrategy.com/wp-content/uploads/2016/12/agileStrategy_Landscape-1.gif?"); 
      $(".for-large-device .wpb_wrapper .vc_single_image-wrapper img:in-viewport").attr('srcset', "http://www.verticalstrategy.com/wp-content/uploads/2016/12/agileStrategy_Landscape-1.gif?"); 
      $(".for-small-device .wpb_wrapper .vc_single_image-wrapper img:in-viewport").attr('src', "http://www.verticalstrategy.com/wp-content/uploads/2016/12/agileStrategy_portrait-1.gif?"); 
      $(".for-small-device .wpb_wrapper .vc_single_image-wrapper img:in-viewport").attr('srcset', "http://www.verticalstrategy.com/wp-content/uploads/2016/12/agileStrategy_portrait-1.gif?"); 

      if ($(".for-large-device .wpb_wrapper .vc_single_image-wrapper").is(':in-viewport')) { 
       gifset = true; 
      } 

     }); 
    }; 
}); 

Answer 1

は、自然言語で、あなたのコードが何をするかです：

：ページの準備ができたら、ページが

準備されるためには

• 待ちます。 gifsetを宣言し、falseに設定します。
• 。 gifsetがfalse [ヒント：常に]である場合は、この操作を行います。ここでの問題は、あなただけにそれを設定した後gifset変数権利を確認することである
• .. ..スクロールリスナー
• を登録...

を。その範囲で決して変更することはできません。

変数チェックをスクロールリスナー内に移動すると、その変数チェックが機能するはずです。 gifsetが真と終了の場合はここで、私は、そうでない場合は以前のようにアクションを実行し、チェック：

jQuery(document).ready(function ($) { 

    gifset = false; 

    $(window).scroll(function() { 

     if(gifset) { 
      return; 
     } 

     $(".for-large-device .wpb_wrapper .vc_single_image-wrapper img:in-viewport").attr('src', "http://www.verticalstrategy.com/wp-content/uploads/2016/12/agileStrategy_Landscape-1.gif?"); 
     $(".for-large-device .wpb_wrapper .vc_single_image-wrapper img:in-viewport").attr('srcset', "http://www.verticalstrategy.com/wp-content/uploads/2016/12/agileStrategy_Landscape-1.gif?"); 
     $(".for-small-device .wpb_wrapper .vc_single_image-wrapper img:in-viewport").attr('src', "http://www.verticalstrategy.com/wp-content/uploads/2016/12/agileStrategy_portrait-1.gif?"); 
     $(".for-small-device .wpb_wrapper .vc_single_image-wrapper img:in-viewport").attr('srcset', "http://www.verticalstrategy.com/wp-content/uploads/2016/12/agileStrategy_portrait-1.gif?"); 

     if ($(".for-large-device .wpb_wrapper .vc_single_image-wrapper").is(':in-viewport')) { 
      gifset = true; 
     } 

    }); 
}); 

すべてのスクロールが結果として維持されますよう、よりよい解決策は、映像ソースが更新された後、リスナーの登録を解除することですそれが起こるまでの関数呼び出し（短い関数呼び出しであっても、それは不要なオーバーヘッドです）。