Question

我正在使用此代码为我的图像添加“show”类，因此当一个人向下滚动时，图像就会显示出来。它适用于桌面（在chrome中测试，使用mousescroll和触摸模拟）但它在移动设备上的chrome中不起作用。未检测到滑动（触摸滚动）。页面下降但图像不明白。显示。我在fullpage.js + iscroll.js页面中使用它。

您可以尝试：http://www.vinarijapantic.com/apps/onePage/project.html

有什么想法吗？

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

在移动网络上启用JavaScript

有些情况下浏览器会抛出错误 “试图在移动设备上访问-------” 这意味着您的设备上的Web浏览器需要在加载页面之前启用JavaScript。

要启用JavaScript，请打开移动网络浏览器的设置菜单，然后查找JavaScript选项。

Answer 2

构建您自己的延迟加载插件（这是您尝试做的通俗名称）不值得技术债务。请使用贡献的jQuery插件。

我过去曾使用过这个：https://github.com/tuupola/jquery_lazyload

它非常易于使用 - 只需在HTML img标记中添加data属性，并使用简单的jQuery参考实例化该插件。

HTML：

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

JS：

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

淡入滚动在移动浏览器中无效

2 个答案: