预加载SVG图像

问题描述

我有大约一百个简单的SVG图像，它们存储在大约五个不同的图像文件夹中。目前，当需要显示它们时，它们就会立即被检索出来。这在很大程度上起作用，但它有时会引起闪烁，我想消除这种闪烁。有没有办法在需要时预先加载这些图像，以便它们能够被缓存？我在这里看到了一些解决方案，但他们主要处理少量图像。是否有一个做高容量预加载的首选方式？

谢谢！

解决方案

如果您拥有图片的所有网址，您可以使用网址尽快将其缓存到JS对象中，稍后在需要时从这些网址抓取。

在您的页面中，您可能会在某处存储SVG图像列表，但最终您需要的仅仅是JS数组的字符串。

下面是一个简单的例子：

  //假设你从某个地方获得了url并将它们放入JS中数组
 var url = ['url_image_1.svg'，'url_image_2.svg'，...]; 
 
 var svgCache = {}; 
 
函数loaded（）{
 //如果仍有图像未处理，只需递增计数器... 
 if（counter ++> = total）{
 / /当这个函数被加载
 //例如时会被调用你可以设置一个标志来说我已经得到了所有图像
 alldone（）; 
} 
} 
 
 var counter = 0; 
 var total = urls.length; 
 
 //这将并行加载图像：
 //在大多数浏览器中，可以有4到6个并行请求
 // IE7 / 8只能执行2个请求（var i = 0; i< total; i ++）{
 var img = new Image（）; 
 //完成后调用函数loaded
 img.onload = loaded; 
 //缓存
 svgCache [urls [i]] = img; 
 img.src = url [i]; 
} 
 
函数alldone（）{
 //从这一点开始，您可以使用缓存为图像提供服务
 ... 
 //说你想只加载第一张图片
 showImage（'url_image_1.svg'，'imageDivId'）; 
} 
 
 //基本上每次你想要加载一个不同的图像时，只需使用这个函数
 function showImage（url，id）{
 //获取图像由给定的url引用
 var cached = svgCache [url]; 
 //并将其附加到具有给定ID的元素
 document.getElementById（id）.appendChild（cached）; 
} 
  

注意：

• 考虑到加载图片时出错的情况，所以请将回调也放在 img.onerror 上并提供以避免一些丢失的图像作为替换


• 在这里有一些更多的考虑事项，像一些浏览器与SVG的怪癖，但基本的解决方案应该工作。

I have about a hundred of simple SVG images, which are stored in about five different image folders. Currently, when they are needed to be displayed, they are retrieved right then. This, for the most part, works, but it does sometimes cause flickering, which I would like to eliminate. Is there a way to preload these images prior to when they are needed, so that they would be cached? I've seen some solutions on here, but they mainly deal with a small number of images. Is there a preferred way of doing a high volume preload?

Thanks!

解决方案

If you have all the URLs of the images you can start to cache them as soon as possible in a JS object using the url, and later just fetch them from there when you need them.

In your page you may have the list of SVG images stored in somewhere, but at the end what you need is just a JS array of URLs string.

Here's a quick example:

// 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);
}

Note:

• Consider also the case of error on loading the image, so put a callback also to img.onerror and serve in case some "missing" image as replacement
• There are some more considerations to do here, like some browser quirks with SVGs but the basic solution should work.

这篇关于预加载SVG图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！