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分鍾）