Web性能：循环通过相同的4个img src发出太多请求

Question

为了学习，我试图构建一个简单的图像轮播。

当前代码包含一组网址，这些网址会循环显示，以更新div的背景图片

var urls = [
    ‘/assets/img/topcatchimage/top-catiimg01.jpg’,
    ‘/assets/img/topcatchimage/top-catiimg02.jpg’,
    ‘/assets/img/topcatchimage/top-catiimg03.jpg’,
    ‘/assets/img/topcatchimage/top-catiimg04.jpg’
];

setInterval(changeBackground, 3000);

var i = 0
function changeBackground () {
    if (i == 4) { i = 0 }
    document.getElementById('mainvisual').style.background = `url(${urls[i]})`
    i++
}

由于某种我不知道的原因，这总共导致6-8个请求； 每个图像两张。 两次请求图像后，将不再与新请求一起发送图像。

有没有一种方法可以将这些图像加载到内存中并使用它们而无需每次都发出请求？

Answer 1

在我的情况下，每个图像仅请求一个。

例

 var urls = [ 'https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/68dd54ca-60cf-4ef7-898b-26d7cbe48ec7/10-dithering-opt.jpg', 'https://www.wonderplugin.com/videos/demo-image0.jpg', 'https://www.samcodes.co.uk/project/geometrize-haxe-web/assets/images/xseagull.jpg.pagespeed.ic.iK66EGA15-.jpg', 'https://www.elastic.co/assets/bltada7771f270d08f6/enhanced-buzz-1492-1379411828-15.jpg' ]; setInterval(changeBackground, 500); var i = 0; function changeBackground() { if (i == 4) { i = 0; } document.getElementById('mainvisual').style.backgroundImage = `url(${urls[i]})`; i++; } 

 #mainvisual { width: 400px; height: 400px; background-repeat: no-repeat; background-size: contain; background-position: center; border: 1px solid #DDD; } 

 <div id="mainvisual"></div> 

但是，如果在您的情况下，它被加载了多次，那么您可以创建一个div并显示并隐藏它，而不是更改背景。

这是一个有效的例子

 var urls = [ 'https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/68dd54ca-60cf-4ef7-898b-26d7cbe48ec7/10-dithering-opt.jpg', 'https://www.wonderplugin.com/videos/demo-image0.jpg', 'https://www.samcodes.co.uk/project/geometrize-haxe-web/assets/images/xseagull.jpg.pagespeed.ic.iK66EGA15-.jpg', 'https://www.elastic.co/assets/bltada7771f270d08f6/enhanced-buzz-1492-1379411828-15.jpg' ]; setInterval(changeBackground, 500); var i = 0 function changeBackground () { if (i == 4) { i = 0; } var images = document.getElementsByClassName("image"); for (var x of images) { x.style.display = "none"; } var image = images[i]; if (typeof image === "undefined") { var newImage = document.createElement("div"); newImage.className = "image"; newImage.style.backgroundImage = `url(${urls[i]})`; document.getElementById("mainvisual").appendChild(newImage); } else { image.style.display = "block"; } i++; } 

 .image { width: 400px; height: 400px; background-repeat: no-repeat; background-size: contain; background-position: center; border: 1px solid #DDD; } 

 <div id="mainvisual"></div> 

Answer 2

您可以创建一个预加载器函数，然后在所有加载完成后传递一个回调以执行：

function preload(arr,callback){
    var img = new Image();
    img._count = 0;
    img.onload = function(){
        if(++this._count === arr.length){
            callback && callback();
        } else {
            img.src = arr[this._count];
        }
    }
    img.src = arr[0];
}

一旦全部预加载，就可以为该函数提供url（arr）和回调（您的函数）。 所以一起：

var urls =[
"https://raw.githubusercontent.com/IbrahimTanyalcin/LEXICON/master/lexiconLogo.png",
"https://raw.githubusercontent.com/IbrahimTanyalcin/LEXICON/master/img/distribute.gif",
"https://raw.githubusercontent.com/IbrahimTanyalcin/LEXICON/master/img/dash.gif"
];

//callpreloader
preload(urls,callback);

//preloader
function preload(arr,callback){
    var img = new Image();
    img._count = 0;
    img.onload = function(){
        if(++this._count === arr.length){
            callback && callback();
        } else {
            img.src = arr[this._count];
        }
    }
    img.src = arr[0];
}

//your function
function callback(){
    setInterval(changeBackground, 3000);
    var i = 0
    function changeBackground () {
        if (i == 4) { i = 0 }
        document.getElementById('mainvisual').style.background = `url(${urls[i]})`
        i++
    }
}

小提琴： https ： //jsfiddle.net/ibowankenobi/L347w43y/

我也许还应该提到，您不能完全通过浏览器控制缓存行为。 在客户端chrome带有meta -tag，可用于指定cache-control标头。 但是例如在我发布的jsfiddle中，检查请求和响应标头，您将在其中看到该提琴请求标头包含Cache-Control no-cache 。 由于缓存控制标头是单向的，因此来自github的响应标头在返回的图像上也指定了300s。 因此，最重要的是：只要标题不覆盖所需的行为，我建议的解决方案就可以起作用。

为了验证我所说的内容，请对该脚本进行本地html复制，然后在此处运行。 除失败的请求外，成功的请求将被缓存（自github也发送Cache-control标头以来持续5分钟）