JavaScript预加载图像
你能告诉我，我写下面的函数是否足以预加载图像在大多数，如果不是所有浏览器常用的今天？
function preloadImage(url) { var img=new Image(); img.src=url; } 我有一个imageURL数组，我循环并调用每个URL的preloadImage函数。
是。 这应该适用于所有主stream浏览器。
试试这个我觉得这样比较好。
var images = []; function preload() { for (var i = 0; i < arguments.length; i++) { images[i] = new Image(); images[i].src = preload.arguments[i]; } } //-- usage --// preload( "http://domain.tld/gallery/image-001.jpg", "http://domain.tld/gallery/image-002.jpg", "http://domain.tld/gallery/image-003.jpg" )
资料来源： http : //perishablepress.com/3-ways-preload-images-css-javascript-ajax/
CSS2select： http : //www.thecssninja.com/css/even-better-image-preloading-with-css2
body:after { content: url(img01.jpg) url(img02.jpg) url(img03.jpg); display: none; }
CSS3select： https ： //perishablepress.com/preload-images-css3/ （H / T Linh Dam）
.preload-images { display: none; width: 0; height: 0; background: url(img01.jpg), url(img02.jpg), url(img03.jpg); }
注意： display:none的容器中的图像可能不会预加载。 也许能见度：隐藏会更好地工作，但我没有testing过这个。 感谢Marco Del Valle指出这一点
我build议你使用try / catch来防止一些可能的问题：
OOP：
var preloadImage = function (url) { try { var _img = new Image(); _img.src = url; } catch (e) { } }
标准：
function preloadImage (url) { try { var _img = new Image(); _img.src = url; } catch (e) { } }
另外，虽然我喜欢DOM，但是愚蠢的浏览器在使用DOM时可能会遇到问题，所以请尽量避免与freedev的贡献相抵触。 Image（）在旧垃圾浏览器中有更好的支持。
这个方法稍微复杂一些。 在这里，您将所有预先加载的图像存储在一个容器中，可能是一个div。 之后，您可以显示图像或将其在DOM内移动到正确的位置。
function preloadImg(containerId, imgUrl, imageId) { var i = document.createElement('img'); // or new Image() i.id = imageId; i.onload = function() { var container = document.getElementById(containerId); container.appendChild(this); }; i.src = imgUrl; }
在这里尝试 ，我也添加了一些评论
在我的情况下，为onload事件添加一个callback函数是很有用的：
function preloadImage(url, callback) { var img=new Image(); img.src=url; img.onload = callback; }
然后包装它的情况下的一个url的图像被预加载所有的callback完成： https : //jsfiddle.net/4r0Luoy7/
function preloadImages(urls, allImagesLoadedCallback){ var loadedCounter = 0; var toBeLoadedNumber = urls.length; urls.forEach(function(url){ preloadImage(url, function(){ loadedCounter++; console.log('Number of loaded images: ' + loadedCounter); if(loadedCounter == toBeLoadedNumber){ allImagesLoadedCallback(); } }); }); function preloadImage(url, anImageLoadedCallback){ var img = new Image(); img.src = url; img.onload = anImageLoadedCallback; } } // Let's call it: preloadImages([ '//upload.wikimedia.org/wikipedia/commons/d/da/Internet2.jpg', 'wp-content/uploads/2011/08/www.jpg' ], function(){ console.log('All images were loaded'); });
是的，这将工作， 但浏览器将限制 （4-8之间）的实际调用，因此不caching/预载所有所需的图像。
更好的方法是在使用图像之前调用onload，如下所示：
function (imageUrls, index) { var img = new Image(); img.onload = function () { console.log('isCached: ' + isCached(imageUrls[index])); *DoSomething..* img.src = imageUrls[index] } function isCached(imgUrl) { var img = new Image(); img.src = imgUrl; return img.complete || (img .width + img .height) > 0; }
这是我的方法：
var preloadImages = function (srcs, imgs, callback) { var img; var remaining = srcs.length; for (var i = 0; i < srcs.length; i++) { img = new Image; img.onload = function () { --remaining; if (remaining <= 0) { callback(); } }; img.src = srcs[i]; imgs.push(img); } };
