預加載圖像的相對路徑

這可能是一個愚蠢的問題，但我真的很困惑，並且希望從知道這個內容的人那裏得到意見。預加載圖像的相對路徑

預加載圖像可以通過JavaScript或CSS完成（我將考慮兩個）。我閱讀教程，如果瀏覽器再次找到相同的圖像路徑，它會渲染緩存的圖像。

如果我預裝般的畫面：

<img src="../images/bg.jpg" alt="background" width="1" height="1" style='display:none' />

和

<img src="images/bg.jpg" alt="background" />

與JavaScript類似：

function preload(arrayOfImages) { 
    $(arrayOfImages).each(function(){ 
     $('<img/>')[0].src = this; 
    }); 
} 

// Usage: 

preload([ 
    '../img/imageName.jpg', 
    'img/imageName.jpg' // case when using this script in a different hierarchical level) 
]);

將在第二調用結果到圖像的渲染從T他緩存版本或它不會工作，因爲指定的圖像路徑是不同的（儘管最終它指的是同一個文件）。

在此先感謝。

來源

2013-10-21 Mahendra Liya

瀏覽器將確定的完整路徑文件檢查其緩存之前 - 你可以使用Web Inspector工具或Firebug進行測試。 – Graham

你的意思是說瀏覽器總是使用完整的絕對路徑來檢查圖像是否被緩存？ –

是的，這是正確的:)有各種因素影響瀏覽器是否應該加載緩存項目或直接獲取它（ETags，過期頭等），因此瀏覽器將首先確定完整的絕對路徑，然後再查看這些內容並選擇要執行的操作。 – Graham

我意識到這是老之一，但我得到這一個所有的時間從實習生 - 所以這裏去...

即使在onload函數在JS文件要求/告訴瀏覽器尋找圖片;它是瀏覽器查找圖像並告訴JS該圖像已加載。

所以你在JS中的圖像路徑應該和你在HTML中輸入它的方式一樣。

PS：我注意到你的HTML的圖像文件夾是「/圖片」，並在你的JS文件夾是「/ IMG」

來源

2017-04-04 00:29:55 moonunit7

回答

相關問題