IsInViewport modifier img en gif une fois

Question

Je suis complètement bloqué sur ce problème.

Mon but est de changer un img en gif, une fois que le img est dans la fenêtre. J'ai utilisé la bibliothèque IsInViewport: https://github.com/zeusdeux/isInViewport et mis en œuvre le code suivant sur http://www.verticalstrategy.com/agile_strategy/ (voir ci-dessous)Est-ce que quelqu'un peut voir pourquoi mon booléen ne semble pas fonctionner et le gif se charge à chaque fois que vous faites défiler la fenêtre d'affichage?

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

Voici ce que votre code fait, en langage naturel:

• Attendez que la page soit prête
• Une fois que la page est prête:
• . Déclarez gifset, définissez-le sur false.
• . Si gifset est faux [indice: toujours] faire ceci:
• .. enregistrer un écouteur de défilement
• .. ...

Le problème ici est que vous vérifier que le droit variable gifset après l'avoir configuré . Il ne peut jamais changer dans cette étendue.

Si vous déplacez la variable à l'intérieur de l'écouteur de défilement, cela devrait fonctionner. Ici, je vérifie si gifset est vrai et la sortie, sinon effectuer l'action comme avant:

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; 
     } 

    }); 
}); 

Une meilleure solution serait de désenregistrer l'auditeur, une fois la source d'image a été mis à jour, comme chaque rouleau gardera résultat un appel de fonction jusqu'à ce que cela se produise (même s'il s'agit d'un appel de fonction courte, c'est un surdébit inutile).