Предварительная загрузка изображений SVG

Question

У меня есть около сотни простых изображений SVG, которые хранятся в пяти разных папках изображений. В настоящее время, когда они необходимы для отображения, они извлекаются прямо сейчас. Это, по большей части, работает, но иногда это вызывает мерцание, которое я бы хотел устранить. Есть ли способ предварительно загрузить эти изображения до того, когда они понадобятся, чтобы они были кэшированы? Я видел некоторые решения здесь, но в основном они занимаются небольшим количеством изображений. Есть ли предпочтительный способ предварительной загрузки?

Спасибо!

Answer 1

Если у вас есть все URL-адреса изображений, вы можете начать их кешировать как можно скорее в объекте JS с использованием URL-адреса, а позже просто вытащите их оттуда, когда они вам понадобятся.

На вашей странице у вас может быть список SVG-изображений, хранящихся где-то, но в конце вам нужен только массив строк JS.

Вот краткий пример:

// 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, но основное решение должно работать.