Chrome浏览器在重新加载后加载图像时出现问题

Chrome browser has trouble loading images after reload

本文关键字：加载 图像 问题 Chrome 新加载 浏览器      更新时间：2023-09-26

我的网站是http://acclyrics.com

该网站在所有浏览器上都运行良好，然而，一个非常烦人的错误不断出现。当你在chrome上使用它时，它是有效的，但如果你尝试刷新页面，突然页面似乎进入了"永远加载"模式，我制作的图片滑块在几张图片之后就无法工作了。它开始变得一片空白。

同样，这种情况只发生在chrome中，这很奇怪，因为chrome一直是我最好的浏览器。这种情况发生在其他人身上吗？任何关于解决这个问题/解决这个问题的建议都将不胜感激。

这不是一个大问题，因为我看不出有人会重新加载页面的任何原因，但这仍然让我很恼火。

这是我的图片滑块的代码。如果您需要查看任何其他代码，请询问：

function StartPictureSlider() {
    var NumberOfPics = 11;
    var b = 2;
    var c = document.getElementById('PictureSlider');
    setInterval(function () {
        if (b == 1) {
            var previouspicture = "pic" + NumberOfPics
        } else {
            var previouspicture = "pic" + (b - 1)
        };
        var newpicture = "pic" + b;
        document.getElementById(previouspicture).style.display = "none";
        document.getElementById(newpicture).style.display = "block";
        b++;
        if (b > NumberOfPics) {
            b = 1
        };
    }, 4000);
};

图片以HTML的隐藏样式加载，因此滑块只是在更改显示。同样，这在所有浏览器上都很有效，只有Chrome在刷新时除外。

<div id="PictureSlider" class="PictureSlider">
    <img src='pictures/1.png' id="pic1" alt='art work' />
    <img src="pictures/2.png" id="pic2" style="display:none" />
    <img src="pictures/3.png" id="pic3" style="display:none" />
    <img src="pictures/4.png" id="pic4" style="display:none" />
    <img src="pictures/5.png" id="pic5" style="display:none" />
    <img src="pictures/6.png" id="pic6" style="display:none" />
    <img src="pictures/7.png" id="pic7" style="display:none" />
    <img src="pictures/8.png" id="pic8" style="display:none" />
    <img src="pictures/9.png" id="pic9" style="display:none" />
    <img src="pictures/10.png" id="pic10" style="display:none" />
    <img src="pictures/11.png" id="pic11" style="display:none" />
</div>

好的，我相信我解决了这个问题。我在音频标签中加入了preload="none"，现在在chrome上刷新似乎是即时的，没有任何问题。

相关文章：