У меня около сотни простых изображений SVG, которые хранятся примерно в пяти разных папках изображений. В настоящее время, когда они необходимы для отображения, они извлекаются прямо сейчас. Это, по большей части, работает, но иногда это вызывает мерцание, которое я бы хотел устранить. Есть ли способ предварительно загрузить эти изображения до того, когда они понадобятся, чтобы они были кэшированы? Я видел некоторые решения здесь, но в основном они занимаются небольшим количеством изображений. Есть ли предпочтительный способ предварительной загрузки?
Благодаря!
Если у вас есть все 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 // eg 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 и подавайте в случае, если какое-то «пропавшее» изображение заменяется