Question

我正在使用jQuery插件Lazy Load（http://appelsiini.net/projects/lazyload），并且在触摸设备上它运行不顺畅，因为在滚动停止之前脚本不会启动（如https://github.com/tuupola/jquery_lazyload/issues/87所述）。是否有任何已知的解决方法来应用触摸事件以相同的方式触发脚本？

Answer 1

请尝试以下操作，并参阅参考网址，为您服务！

http://javascriptquestions.com/question/showChrono/id/83
if（$ grid.length＆gt; 0）{

    $grid.imagesLoaded( function() {

        $grid.delay(200).masonry({

            gutterWidth: 14,

            itemSelector: '.item',

            isAnimated: false,

            isFitWidth: true,

            columnWidth: 194,

            animationOptions: { duration: 400 }

        });



        $('.item img').lazyload({

            effect: 'fadeIn'

        });

    });

}

Answer 2

嗨，对于在触摸设备上使用lazyload和砌体的任何人来说，这很好（需要jquery + modernizr）：

        var $container = $('#content');
        $container.imagesLoaded(function(){
            $container.masonry({
                itemSelector: '.item',
                });
            if ( Modernizr.touch ) { 
                $('.item img').lazyload({
                    effect: 'fadeIn',
                    event: 'touchLoad'
                    });                 
                $('.item img').trigger('touchLoad');
            }
            else {
                $('.item img').lazyload({
                    effect: 'fadeIn',
                    event: 'scroll'
                    });  
                $('.item img').trigger('scroll');
            }               
        });

Answer 3

有一个很好的轻量级jquery插件 - ＆＃34; imgr＆＃34;。点击https://github.com/agaase/imgr。

该插件是移动优化的;所以用触摸设备很好用。您还可以将图像作为普通元素或背景图像加载。

在这里查看演示

http://agaase.github.io/webpages/imgr/demos/demo1.html http://agaase.github.io/webpages/imgr/demos/demo2.html

触摸设备的延迟加载

3 个答案: