Javascript陣列中的圖像URL是否自動預加載到瀏覽器中？

我只是在我沒有看到直接回答的問題上尋找確認。Javascript陣列中的圖像URL是否自動預加載到瀏覽器中？

我正在建設一個網站，我想將許多圖像網址加載到一個Javascript數組中，而不實際發送圖像到瀏覽器。爲了減少服務器帶寬使用量，我希望將URL存儲在文檔中，並且只在用戶採取特定操作時才加載它們。

我想我的問題是許多「我如何使用Javascript預加載圖像」的問題相反，如發現here。這些問題的流行表明，將URL粘貼在文檔頂部的Javascript數組中並且瀏覽器不會自動預加載它們是安全的。我的假設是否正確？

來源

2014-11-22 Nate Vaughan

是的，這是正確的 – tucaz 2014-11-22 00:58:11

您可以通過測試直接回答這個問題。 – Mathletics 2014-11-22 00:59:42

如何？我可能很笨，但我不知道如何判斷瀏覽器是否在後臺加載了一個圖像。圖像相對較小，我從我自己的電腦上爲他們服務，所以加載時間並不能提供很多線索。 – 2014-11-22 01:15:26

是的圖像是非加載的，因爲你有他們作爲javascriptarray中的字符串，瀏覽器從不請求圖像。

我猜你想要做的事，如：

var myimages = ['{url}','{url}','{url}'];

，那麼你可以這樣做：

$(document).on("click",".somebutton",function(){ 
    for(var i = 0, len = myimages.lenght; i++){ 
    //i will assume you will detect the element depending the situation and its a image element 
    $("someSelector").attr("src",myimages[i]); 
    } 
});

而且這樣你會從你的服務器在確切時刻請求圖像。

//使用jQuery

來源

2014-11-22 01:01:56 ncubica

沒有，陣列中的圖像將不會被加載，直到它們被腳本要求。因此，你可以將其存儲在像這樣的變量：

var imgSrcs = ["http://placekitten.com/g/300/200","http://placekitten.com/1000/1000"] 
 

 
function getSrc(element,value){ 
 
    
 
    element.src = imgSrcs[value]; 
 
    
 
    }

<img onclick="getSrc(this,'0')" src="#"/>

時，它的點擊，或類似的東西加載圖像。

我希望這有助於！

來源

2014-11-22 01:02:03

url本身，以字符串的形式不會預先加載任何東西。您可以隨意放置任意字符串數組，而無需擔心圖像預加載。

如果你想加載一個，你可以創建一個圖像併爲其'src'屬性指定一個url。

var image = new Image(); 
image.src = "http://www.example.com/image/url.jpg";

來源

2014-11-22 01:02:12 Christopher

Javascript陣列中的圖像URL是否自動預加載到瀏覽器中？

回答

相關問題