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

我在我的移动网站上有一个JQuery滑块，用于图像旋转木马。有时，旋转木马的图像超过30个。因此，根据一些手机设计网站的说法，即使压缩了图像，页面的总重量也超过了1150kb

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

我为其他页面实现了一个简单的异步脚本，其中图像仅在视口中加载。我不知道如何在responsiveslides脚本中实现这一点

下面是responsive slide.min.js的代码

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     
            } 
        }
    });

$（document）.on（'pageshow'，'#outerPage'，function（）{
$.fn.is\u在屏幕上=函数（）{
var win=$（窗口）；
变量视口={
top:win.scrollTop（），
左：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（）；
返回（！（viewport.rightbounds.right | | viewport.bottombounds.bottom））；
};
检查它（）；
函数CheckIt（）{
$（'.target'）。每个（函数（）{
if（$（this）.length>0）{//if目标元素存在于DOM中
//警报（$（this）.is_on_screen（））；
if（$（this）.is_on_screen（））{//if加载DOM后目标元素在屏幕上可见
if（$（this）.find（'img'）.attr（'data-src'））{
var source=$（this.find（'img'）.attr（'data-src'）；
$（this.find（'img'）.attr（'src'，source）；
}
//日志信息
} 
}
});

我尝试在这里应用脚本，但是当我添加数据src而不是src时，所有的图像都没有显示出来

---

任何帮助都会非常有用

您在html ie（src=“）等中拥有所有图像，因此它们自然会一次加载所有图像。创建一个脚本，一次动态注入3或4张图片，或者找到一个与您正在使用的延迟加载图片的脚本类似的插件

$(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     
            } 
        }
    });