javascript - 如何预加载图像，以便我的 ASP.NET 网页站点中的非插件幻灯片放映计时不会被取消？

Question

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

我有一个<div>包含 <img>我使用 JavaScript 更改其源来创建简单的幻灯片。

简单的 HTML:

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

我遇到的问题是，当用户第一次访问该网站时，第一次浏览幻灯片时图像加载时间太长，并且会影响幻灯片的计时。一旦浏览器缓存了图像，它就可以正常工作。如果有一种方法可以在幻灯片开始之前加载所有图片，我相信它可以解决问题。在测试过程中，这个问题从未出现过，因为图像已经被我的浏览器缓存，因此不需要过多的加载时间。

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

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

我尝试自己阅读此内容，但我没有得到我认为可以适应我的代码的答案。要么是这个，要么是解决方案超出了我的想象。

我读过的网站:

Slideshow starts while images are loading but first image isn't displayed until all are downloaded

loading all images before slideshow

如果您想自己检查问题，您应该可以通过访问此链接到达那里:http://test.cityofokmulgee.org:54543

请记住，此错误可能只会在您第一次加载页面时自然出现。之后，您的浏览器将缓存图像，并且加载时间不会影响幻灯片放映的时间(除非您从浏览器缓存中清除图像，这是我自己做的不成功的事情)。另外，我不确定这个问题是否会出现在 Chrome 中，但我知道它会出现在 IE 中。

非常感谢任何帮助，因为这是不允许该网站上线的主要错误，而且我以前从未做过类似预加载图像之类的事情，所以我不知道从哪里开始。

可能有用的其他信息:

服务器端文件 Compute_Slide_Show.cshtml 的内容(用 C# 编写):

@{
    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
}

Answer 1

天哪，我看到里面有很多奇怪的东西!

第一个想法:您真的需要创建自己的幻灯片吗？在您的情况下，我宁愿使用 jQuery/AJAX 创建标记并将现有 slider (如 flexslider)应用于您的图像。你为什么不这样做呢？

第二件事，只是为了它，是如何解决不透明度变暗的问题。在 jQuery 中，您可以通过 .animate() (需要 css 映射)轻松地为元素设置动画，或者只使用 fade()，如下所示:

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

此外:无论如何，通过 css istn 跨浏览器设置不透明度。

要获取加载内容，有多种方法可以执行此操作，我的建议是为隐藏 div 中的 paths 中的每个键附加图像:

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