Javascript 如何预加载图像，使我的ASP.NET网页中的非插入式幻灯片放映时间不会中断？

首先，我已经研究了一段时间，但我觉得这个问题有点超出了我自己的能力。或者至少，在这一点上超出了我的经验，因为我以前从未这样做过

我有一个

包含

我遇到的问题是，当用户第一次访问该站点时，在他们第一次通过幻灯片放映时，图像需要花费太长时间才能加载，这会影响幻灯片放映的时间。一旦浏览器缓存了图像，它就可以正常工作。如果有办法在幻灯片放映开始前加载所有图片，我相信这会解决问题。在测试过程中，这个问题从未出现过，因为我的浏览器已经缓存了图像，所以不需要过多的加载时间

下面是我用于幻灯片放映的JavaScript（jQuery）。这些图片最初来自服务器端数据库，因此我使用AJAX获取所需的文件名值（目前数据库中只有14个条目/图片，但这个数字可能会增加或减少，因为站点管理员将能够通过部分CMS编辑幻灯片中的图片）。为了解释一些代码，此幻灯片演示具有鼠标悬停和鼠标悬停时恢复的功能

<div id="slideShowWrapper">
    <img id="slideShowImage" src="~/Images/City_Images/Okmulgee_Clock_2.jpg" alt="Okmulgee Clock" title="Slide Show Paused" />
</div>

jQuery（函数（$）{
//幻灯片放映功能
var路径=新数组（）；
var timer=新数组（）；
var pathsString=“”；
var i=1；
变量面板=$（“img#幻灯片图像”）；
var-fTimer；
var tTimer；
无功定时器；
var fadingOut=假；
var slideshown=false；
var显示定时器；
$.ajax({
url:“/AJAX页面/Compute\u Slide\u Show.cshtml”，
async:false，
键入：“获取”，
成功：功能（响应）{
路径=响应。拆分（“/*\\”；
},
错误：函数（jqXHR、textStatus、error）{
路径[0]=“Okmulgee_Clock_2.jpg”；
}
});
如果（路径长度>0）{
panel.attr（“src”、“/Images/SlideShowPics/”+路径[0]）
如果（路径长度>1）{
swapImage（）；
}
}
否则{
attr（“src”，“Images/City_Images/Okmulgee_Clock_2.jpg”）；
}
面板鼠标输出（功能（）{
如果（路径长度>1）{
runSlideShow（）；
}
});
面板鼠标盖（功能（）{
如果（路径长度>1）{
停止幻灯片放映（）；
}
});
函数runSlideShow（）{//调用swapImage函数以开始或恢复幻灯片放映
如果（幻灯片显示==false）{
slideshown=true；
如果（渐减==假）{
清除超时（）；
}
showTimer=setTimeout（swapImage，1552）；
}
};
函数stopSlideShow（）{//暂停幻灯片放映
clearTimeout（显示计时器）；
如果（渐减==真）{
fTimer=设置超时（清除超时，1551）；
}
else if（渐减==假）{
清除超时（tTimer）；
清除超时（）；
}
slideshown=false；
};
函数swapImage（）{//淡出幻灯片图像
tTimer=setTimeout（函数（）{fadingOut=true}，4549）；
计时器[0]=setTimeout（函数（）{panel.css（'opacity'，'0.9'）}，4550）；
计时器[2]=setTimeout（函数（）{panel.css（'opacity'，'0.8'）}，4600）；
timer[4]=setTimeout（函数（）{panel.css（'opacity'，'0.7'）}，4650）；
计时器[6]=setTimeout（函数（）{panel.css（'opacity'，'0.6'）}，4700）；
计时器[8]=setTimeout（函数（）{panel.css（'opacity'，'0.5'）}，4750）；
timer[10]=setTimeout（函数（）{panel.css（'opacity'，'0.4'）}，4800）；
计时器[12]=setTimeout（函数（）{panel.css（'opacity'，'0.3'）}，4850）；
timer[14]=setTimeout（函数（）{panel.css（'opacity'，'0.2'）}，4900）；
timer[16]=setTimeout（函数（）{panel.css（'opacity'，'0.1'）}，4950）；
计时器[18]=setTimeout（函数（）{panel.css（'opacity'，'0'）}，5000）；
定时器[20]=设置超时（SwapImage22550）；
}
函数swapImage2（）{//在幻灯片图像中更改和淡出
panel.attr（“src”，“/Images/SlideShowPics/”+路径[i]）；
如果（i

我自己也试着读过，但是我没有得到我认为我可以适应我的代码的答案。要么这样，要么解决方案就在我的脑海里

所以我读到的网站：

如果您想自己检查问题，您应该可以访问以下链接：

请记住，这个错误可能只会在您第一次加载页面时自然出现。之后，浏览器将缓存ima

jQuery(function ($) {
    //Slideshow functionality
    var paths = new Array();
    var timer = new Array();
    var pathsString = "";
    var i = 1;
    var panel = $("img#slideShowImage");
    var fTimer;
    var tTimer;
    var t2Timer;
    var fadingOut = false;
    var slideShowOn = false;
    var showTimer;

    $.ajax({
        url: "/AJAX Pages/Compute_Slide_Show.cshtml",
        async: false,
        type: "GET",
        success: function (response) {
            paths = response.split("/*\\");
        },
        error: function (jqXHR, textStatus, error) {
            paths[0] = "Okmulgee_Clock_2.jpg";
        }
    });

    if (paths.length > 0) {
        panel.attr("src", "/Images/SlideShowPics/" + paths[0])
        if (paths.length > 1) {
            swapImage();
        }
    }
    else {
        panel.attr("src", "/Images/City_Images/Okmulgee_Clock_2.jpg");
    }

    panel.mouseout(function () {
        if (paths.length > 1) {
            runSlideShow();
        }
    });

    panel.mouseover(function () {
        if (paths.length > 1) {
            stopSlideShow();
        }
    });

    function runSlideShow() {  //Calls the swapImage function to begin or resume the slide show
        if (slideShowOn == false) {
            slideShowOn = true;
            if (fadingOut == false) {
                clearTimeouts();
            }
            showTimer = setTimeout(swapImage, 1552);
        }
    };

    function stopSlideShow() {  //Pauses the slide show
        clearTimeout(showTimer);
        if (fadingOut == true) {
            fTimer = setTimeout(clearTimeouts, 1551);
        }
        else if (fadingOut == false) {
            clearTimeout(tTimer);
            clearTimeouts();
        }
        slideShowOn = false;
    };


    function swapImage() {  //Fades out the slideshow image
        tTimer = setTimeout(function () { fadingOut = true }, 4549);
        timer[0] = setTimeout(function () { panel.css('opacity', '0.9') }, 4550);
        timer[2] = setTimeout(function () { panel.css('opacity', '0.8') }, 4600);
        timer[4] = setTimeout(function () { panel.css('opacity', '0.7') }, 4650);
        timer[6] = setTimeout(function () { panel.css('opacity', '0.6') }, 4700);
        timer[8] = setTimeout(function () { panel.css('opacity', '0.5') }, 4750);
        timer[10] = setTimeout(function () { panel.css('opacity', '0.4') }, 4800);
        timer[12] = setTimeout(function () { panel.css('opacity', '0.3') }, 4850);
        timer[14] = setTimeout(function () { panel.css('opacity', '0.2') }, 4900);
        timer[16] = setTimeout(function () { panel.css('opacity', '0.1') }, 4950);
        timer[18] = setTimeout(function () { panel.css('opacity', '0') }, 5000);
        timer[20] = setTimeout(swapImage2, 5050);
    }

    function swapImage2() {  //Changes and fades in the slideshow image
        panel.attr("src", "/Images/SlideShowPics/" + paths[i]);
        if (i < paths.length - 1) {
            i++;
        }
        else {
            i = 0;
        }
        timer[21] = setTimeout(function () { panel.css('opacity', '0.1') }, 550);
        timer[23] = setTimeout(function () { panel.css('opacity', '0.2') }, 600);
        timer[25] = setTimeout(function () { panel.css('opacity', '0.3') }, 650);
        timer[27] = setTimeout(function () { panel.css('opacity', '0.4') }, 700);
        timer[29] = setTimeout(function () { panel.css('opacity', '0.5') }, 750);
        timer[31] = setTimeout(function () { panel.css('opacity', '0.6') }, 800);
        timer[33] = setTimeout(function () { panel.css('opacity', '0.7') }, 850);
        timer[35] = setTimeout(function () { panel.css('opacity', '0.8') }, 900);
        timer[37] = setTimeout(function () { panel.css('opacity', '0.9') }, 950);
        timer[39] = setTimeout(function () { panel.css('opacity', '1') }, 1000);
        t2Timer = setTimeout(function () { fadingOut = false }, 1050);
        timer[41] = setTimeout(swapImage, 1050);
    }

    function clearTimeouts() {  //Clears all slide show timers
        for (key in timer) {
            clearTimeout(timer[key]);
        }
    }
});

@{
    Layout = "";

    string fileNames = "";

    if(IsAjax)
    {
        var db = Database.Open("Content");

        bool firstRun = true;

        foreach (var row in db.Query("SELECT FileOrder, FileName FROM SlideShow WHERE FileName IS NOT NULL AND FileName <> '' ORDER BY FileOrder ASC"))
        {
            if (firstRun == true)
            {
                firstRun = false;
                fileNames += row.FileName;
            }
            else
            {
                fileNames += "/*\\";
                fileNames += row.FileName;
            }
        }
    }
    else
    {
        Context.RedirectLocal("~/home.cshtml");
    }
@:@fileNames
}

function swapImage() {  //Fades out the slideshow image
    tTimer = setTimeout(function () { fadingOut = true;
        panel.stop().fadeTo(500, 0, function() {
            // callback after the element has been faded
            swapImage2();
        });
    }, 4549);
}

for (var i = 0; i < paths.length; i++) {
   $('.hidden').append('<img src="' + paths[i] + '" />');
}

var checkforloaded = setInterval(function() {
        var _loaded = 0;

        for (var i = 0; i < paths.length; i++) {
            var image = $('.hidden').children().eq(i).get(0);

            if (image.complete || image.readyState == 'complete' || image.readyState == 4) {
                _loaded++;
            }
        }

        if (_loaded === paths.length) {
            clearInterval(checkforloaded);

            // start the slider
        }
    }, 80);