Web 性能:循环访问相同的 4 个 img src，发出太多请求

Question

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

当前代码具有循环访问的 url 数组，以更新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-标记，允许您指定cache-control标头。但是例如，在我发布的jsfiddle中，检查请求和响应标头，您将看到小提琴请求标头包含Cache-Control no-cache。由于缓存控制标头是单向的，因此来自 github 的响应标头还会在返回的图像上指定 300。所以底线：我提出的解决方案有效，只要标题不覆盖所需的行为。

要验证我所说的内容，请制作脚本的本地 html 副本并在那里运行它。除了失败的请求外，成功的请求将被缓存(自 github 也发送该缓存控制标头以来 5 分钟)