首页 > 代码库 > 如何给图片做缓存

如何给图片做缓存

在大型网页中,我们会遇到一张大图片需要被下载下来,但是要考虑到图片下载下来的时间会阻塞其他资源的下载,为了有效得控制住图片所占用的网络资源,可以使用javascript方式来解决这个问题,大概代码是这样的:

 1 function preloadImages(array) { 2     if (!preloadImages.list) { 3         preloadImages.list = []; 4     } 5     for (var i = 0; i < array.length; i++) { 6         var img = new Image(); 7         img.onload = function() { 8             var index = preloadImages.list.indexOf(this); 9             if (index !== -1) {10                 // remove this one from the array once it‘s loaded11                 // for memory consumption reasons12                 preloadImages.splice(index, 1);13             }14         }15         preloadImages.list.push(img);16         img.src =http://www.mamicode.com/ array[i];17     }18 }19 20 preloadImages(["url1.jpg", "url2.jpg", "url3.jpg"]);

我们可以看得出来,这是对需要加载的图片进行预加载,但是这样就能够缓存图片吗,不是的,这只是给图片进行预加载,并不能算是缓存图片,当图片加载到网页中的时候,浏览器会对这些资源进行缓存,在第二次加载的时候不会重新请求服务器,它会预先加载缓存的文件

如何给图片做缓存