jquery - 触摸设备的延迟加载

Question

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

Answer 1

试试下面的方法，看看参考 URL 是否适合您！

http://javascriptquestions.com/question/showChrono/id/83
if ( $grid.length > 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

有一个很好的轻量级 jquery 插件——“imgr”。在这里查看https://github.com/agaase/imgr。

该插件针对移动设备进行了优化；所以非常适合触摸设备。您还可以将图像加载为普通元素或背景图像。

在此处查看演示

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

Answer 3

嗨，对于在触摸设备上使用带有砌体的延迟加载的任何人，这都可以正常工作（需要 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');
            }               
        });