Fade in on scroll doesn't work in mobile browser

Question

I am using this code to add class "show" to my images so when a person scrolls down, images show up. It works on desktop (tested in chrome, with mousescroll and with touch simulation) but it does not work in chrome on mobile device. Swipe(scroll with touch) is not detected. Page goes down but images dont get that .show. I am using this inside fullpage.js+iscroll.js page.

You can try this at: http://www.vinarijapantic.com/apps/onePage/project.html

Any ideas?

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

Enable JavaScript on mobile web

There are situations where the browsers throw an error like "when trying to access ------- on a mobile device" it means the web browser on your device needs to have JavaScript turned on before you load the page.

To turn on JavaScript, open the settings menu for your mobile web browser and look for the JavaScript option.

Answer 2

It's not worth the technical debt to build your own lazy loading plugin (which is a colloquial name for what you are trying to do). Use a contributed jQuery plugin instead.

I've used this one with great success in the past: https://github.com/tuupola/jquery_lazyload

It's really easy to use - just add an data attribute to your HTML img tag and instantiate the plugin with a simple jQuery reference.

HTML:

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

JS:

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