Question

我的移动网站上有一个用于图像转盘的JQuery SLider。有时候转盘的图像超过30张。因此，即使在压缩图像后，页面的总重量也会超过1150 kb，根据一些移动设计网站的说明

对于快速渲染，页面重量不应超过500 kb。

我已经为其他页面实现了一个简单的异步脚本，只有当它在视口上时才会加载图像。我没有得到如何在responsiveslides Script

中实现它

以下是响应式slide.min.js的代码 LinkToFiddle

$("#slider1").responsiveSlides({
    startidx: 0,
    auto: false,
    pager: true,
    nav: true,
    speed: 500,
    maxwidth: 540,
    namespace: "transparent-btns"
});
imageHandler();
//$('.transparent-btns_nav').trigger('click');
$(document).on('click', '.transparent-btns_nav', function (event) {
    imageHandler();
});

lazyLoader代码在这里

$(document).on('pageshow','#outerPage',function(){
$.fn.is_on_screen = function () {
    var win = $(window);
    var viewport = {
        top: win.scrollTop(),
        left: win.scrollLeft()
    };
    viewport.right = viewport.left + win.width();
    viewport.bottom = viewport.top + win.height();

    var bounds = this.offset();
    bounds.right = bounds.left + this.outerWidth();
    bounds.bottom = bounds.top + this.outerHeight();

    return (!(viewport.right < bounds.left || viewport.left > bounds.right || viewport.bottom < bounds.top || viewport.top > bounds.bottom));
};
CheckIt();

function CheckIt() {
    $('.target').each(function () {
        if ($(this).length > 0) { // if target element exists in DOM
            //alert($(this).is_on_screen());
            if ($(this).is_on_screen()) { // if target element is visible on screen after DOM loaded
                if ($(this).find('img').attr('data-src')) {
                    var source = $(this).find('img').attr('data-src');

                    $(this).find('img').attr('src', source);


                }
                // log info     
            } 
        }
    });

我尝试在这里应用脚本，但是当我添加data-src而不是src时，他们只是不显示所有图像

任何帮助都会非常有用

如何为responsiveslides.min.js实现异步加载

0 个答案: