預加載SVG圖像

Question

我有大約一百個簡單的SVG圖像，它們存儲在大約五個不同的圖像文件夾中。目前，當需要顯示它們時，它們就會立即被檢索出來。這在很大程度上起作用，但它有時會引起閃爍，我想消除這種閃爍。有沒有辦法在需要時預先加載這些圖像，以便它們能夠被緩存？我在這裏看到了一些解決方案，但他們主要處理少量圖像。有沒有一種高音量預加載的首選方式？

謝謝！

Answer 1

如果您擁有圖片的所有網址，您可以開始使用網址儘快將它們緩存在JS對象中，稍後在需要時從它們那裏獲取它們。

在您的頁面中，您可能會在某處存儲SVG圖像列表，但最終您需要的僅僅是JS數組的URL字符串。

這裏有一個簡單的例子：

// assuming you've gotten the urls from somewhere and put them in a JS array 
var urls = ['url_image_1.svg', 'url_image_2.svg', ... ]; 

var svgCache = {}; 

function loaded(){ 
    // just increment the counter if there are still images pending... 
    if(counter++ >= total){ 
    // this function will be called when everything is loaded 
    // e.g. you can set a flag to say "I've got all the images now" 
    alldone(); 
    } 
} 

var counter = 0; 
var total = urls.length; 

// This will load the images in parallel: 
// In most browsers you can have between 4 to 6 parallel requests 
// IE7/8 can only do 2 requests in parallel per time 
for(var i=0; i < total; i++){ 
    var img = new Image(); 
    // When done call the function "loaded" 
    img.onload = loaded; 
    // cache it 
    svgCache[urls[i]] = img; 
    img.src = urls[i]; 
} 

function alldone(){ 
    // from this point on you can use the cache to serve the images 
    ... 
    // say you want to load only the first image 
    showImage('url_image_1.svg', 'imageDivId'); 
} 

// basically every time you want to load a different image just use this function 
function showImage(url, id){ 
    // get the image referenced by the given url 
    var cached = svgCache[url]; 
    // and append it to the element with the given id 
    document.getElementById(id).appendChild(cached); 
} 

注意：

• 還考慮在加載圖像錯誤的情況下，這樣就把一個回調也img.onerror和服務的情況下，一些「缺少「圖像作爲替換
• 這裏有一些更多的考慮事項，像一些瀏覽器與SVG的怪癖，但基本的解決方案應該工作。