Le fondu d'entrée ne fonctionne pas dans le navigateur mobile

Question

J'utilise ce code pour ajouter une classe "show" à mes images, donc quand une personne défile vers le bas, les images s'affichent. Il fonctionne sur le bureau (testé en chrome, avec mousescroll et avec la simulation tactile) mais il ne fonctionne pas en chrome sur les appareils mobiles. Balayer (faire défiler avec le toucher) n'est pas détecté. La page tombe en panne mais les images ne reçoivent pas cela .show. J'utilise ceci à l'intérieur de la page fullpage.js + iscroll.js.

Vous pouvez essayer à: http://www.vinarijapantic.com/apps/onePage/project.html

Toutes les idées?

jQuery(document).ready(function($) { 
    function showImages(el) { 
     var windowHeight = jQuery(window).height(); 
     $(el).each(function() { 
      var thisPos = $(this).offset().top; 

      var topOfWindow = $(window).scrollTop(); 
      if (topOfWindow + windowHeight - 250 > thisPos) { 
       $(this).addClass("show"); 
      } 
     }); 
    } 



    /*full page library */ 
    var SCROLLING_SPEED = 600; 
    $('#fullpage').fullpage({ 

     scrollOverflow: true, 
     css3: true, 
     controlArrows: true, 
     loopHorizontal: false, 
     easing: 'easeInOutCubic', 
     easingcss3: 'ease-out', 
     autoScrolling: true, 
     scrollingSpeed: SCROLLING_SPEED, 
     //anchors:['s0', 's1', 's2', 's3'] 
     afterLoad: function(anchorLink, index) { 

     }, 
     afterSlideLoad: function(anchorLink, index, slideAnchor, slideIndex) { 

      if (slideIndex == 0) { 
       $('.slide-' + index).addClass('show'); 
      } else { 
       $('.slide').removeClass('show'); 

      } 
      if ($('.bigScroll').hasClass('active') && $('.bigScroll').closest('.section').hasClass('active')) { 
       console.log($(".bigScroll").height()); 
       showImages('.bigScroll img'); 
       $('.fp-scrollable').scroll(function() { 
        showImages('.bigScroll img'); 
       }); 
      } 
     } 
    }); 
}); 

Answer 1

activer JavaScript sur le web mobile

Il y a des situations où les navigateurs jettent une erreur comme « lors d'une tentative d'accès ------- sur un appareil mobile » cela signifie que le navigateur Web sur votre appareil doit avoir activé JavaScript avant de charger la page.

Pour activer JavaScript, ouvrez le menu des paramètres de votre navigateur Web mobile et recherchez l'option JavaScript.

Answer 2

Cela ne vaut pas la peine technique de construire votre propre plugin de chargement paresseux (qui est un nom familier pour ce que vous essayez de faire). Utilisez un plugin jQuery ajouté à la place.

Je l'ai utilisé celui-ci avec un grand succès dans le passé: https://github.com/tuupola/jquery_lazyload

Il est vraiment facile à utiliser - il suffit d'ajouter un attribut data à votre balise HTML img et instancier le plug-in avec une simple référence jQuery.

HTML:

<img class="lazy" data-original="img/example.jpg"> 

JS:

$("img.lazy").lazyload();