使用JavaScript/jQuery预加载图像的最佳方式是什么？
使用JavaScript/jQuery预加载图像的最佳方式是什么？
提问于 2009-05-23 15:02:17
回答 6
Stack Overflow用户
发布于 2013-01-26 23:10:32
截至2013年1月，这里描述的方法对我来说都不起作用，所以下面是我用Chrome25和Firefox18测试和工作的结果。使用jQuery和this plugin来解决加载事件的怪癖：
function preload(sources, callback) {
if(sources.length) {
var preloaderDiv = $('<div style="display: none;"></div>').prependTo(document.body);
$.each(sources, function(i,source) {
$("<img/>").attr("src", source).appendTo(preloaderDiv);
if(i == (sources.length-1)) {
$(preloaderDiv).imagesLoaded(function() {
$(this).remove();
if(callback) callback();
});
}
});
} else {
if(callback) callback();
}
}用法：
preload(['/img/a.png', '/img/b.png', '/img/c.png'], function() {
console.log("done");
});注意，如果缓存被禁用，你会得到混合的结果，当开发人员工具打开时，在Chrome上是默认的，所以请记住这一点。
Stack Overflow用户
发布于 2011-04-30 15:23:49
在我看来，使用一些库引入的多部分XMLHttpRequest将是未来几年的首选解决方案。但是IE < v8，仍然不支持data:uri (即使是IE8也有有限的支持，最多只能支持32kb)。这是一个并行图像预加载的实现-- http://code.google.com/p/core-framework/wiki/ImagePreloading，它捆绑在框架中，但仍然值得一看。
Stack Overflow用户
发布于 2015-04-13 04:45:57
这是很久以前的事了，所以我不知道有多少人仍然对预加载图像感兴趣。
我的解决方案甚至更简单。
我只用了CSS。
#hidden_preload {
height: 1px;
left: -20000px;
position: absolute;
top: -20000px;
width: 1px;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/901677
复制相关文章
相似问题
腾讯云开发者
