IsInViewport меняет img на gif один раз

Question

Я полностью застрял в этой проблеме.

Моя цель - изменить img на gif, как только img находится в области просмотра.

Я использовал библиотеку 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 ложно [подсказка: всегда] сделать это:
• .. Регистрация спиральный слушателю
• .. ...

Проблема здесь состоит в том, что вы только проверить переменную право 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; 
     } 

    }); 
}); 

Лучшим решением было бы разрегистрировать слушателя, когда исходное изображение было обновлено, поскольку каждый свиток будет держать в результате вызов функции до тех пор, пока это не произойдет (даже если это короткий вызов функции, это лишние накладные расходы).