我正在寻找一种快速简单的方法来使用JavaScript预加载图片。如果重要的话，我正在使用jQuery。
我在这里看到了这个 (http://nettuts.com...)：
function complexLoad(config, fileNames) {
for (var x = 0; x < fileNames.length; x++) {
$("<img>").attr({
id: fileNames[x],
src: config.imgDir + fileNames[x] + config.imgFormat,
title: "The " + fileNames[x] + " nebula"
}).appendTo("#" + config.imgContainer).css({ display: "none" });
}
};
但是，它看起来有点过头了，不符合我的要求！
我知道有一些jQuery插件可以做到这一点，但它们都有点大（在大小方面）；我只需要一个快速、简单和短小的预加载图像的方式！
谢谢这个！我想在J-P的答案上加一点小音符 - 我不知道这是否会帮助任何人，但是如果您正确命名缩略图，则无需创建图像数组，即可预加载所有大型图像。这非常方便，因为我有一个人在用html编写所有页面，它确保了他们少做一步 - 消除了创建图像数组的需要，并且还可以避免出现问题的另一步。
$("img").each(function(){
var imgsrc = $(this).attr('src');
if(imgsrc.match('_th.jpg') || imgsrc.match('_home.jpg')){
imgsrc = thumbToLarge(imgsrc);
(new Image()).src = imgsrc;
}
});
jQuery.preloadImage=function(src,onSuccess,onError)
{
var img = new Image()
img.src=src;
var error=false;
img.onerror=function(){
error=true;
if(onError)onError.call(img);
}
if(error==false)
setTimeout(function(){
if(img.height>0&&img.width>0){
if(onSuccess)onSuccess.call(img);
return img;
} else {
setTimeout(arguments.callee,5);
}
},0);
return img;
}
jQuery.preloadImages=function(arrayOfImages){
jQuery.each(arrayOfImages,function(){
jQuery.preloadImage(this);
})
}
// example
jQuery.preloadImage(
'img/someimage.jpg',
function(){
/*complete
this.width!=0 == true
*/
},
function(){
/*error*/
}
)
$("#myImage").attr("src","img/spinner.gif");
var img = new Image();
$(img).load(function() {
$("#myImage").attr("src",img.src);
});
img.src = "http://example.com/imageToPreload.jpg";
我会使用一个 Manifest 文件，告诉（现代）web浏览器也要加载所有相关的图像并将它们缓存起来。使用 Grunt 和 grunt-manifest 自动完成这个过程，永远不必担心预加载脚本、缓存失效、CDN等问题。
这对我来说甚至在IE9中也有效：
$('<img src="' + imgURL + '"/>').on('load', function(){ doOnLoadStuff(); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<img src="https://live.staticflickr.com/65535/50020763321_d61d49e505_k_d.jpg" width="100" />
<img src="https://live.staticflickr.com/65535/50021019427_692a8167e9_k_d.jpg" width="100" />
<img src="https://live.staticflickr.com/65535/50020228418_d730efe386_k_d.jpg" width="100" />
<img src="https://live.staticflickr.com/65535/50020230828_7ef175d07c_k_d.jpg" width="100" />
<div style="background-image: url(https://live.staticflickr.com/65535/50020765826_e8da0aacca_k_d.jpg);"></div>
<style>
.bg {
background-image: url("https://live.staticflickr.com/65535/50020765651_af0962c22e_k_d.jpg");
}
</style>
<div class="bg"></div>
<div id="loadingProgress"></div>
src和background-image保存在一个数组中，并加载它们。loadCount查看/读取/显示加载进度。let backgroundImageArray = [];
function backgroundLoading(i) {
let loadCount = 0;
let img = new Image();
$(img).on('load', function () {
if (i < backgroundImageArray.length) {
loadCount = parseInt(((100 / backgroundImageArray.length) * i));
backgroundLoading(i + 1);
} else {
loadCount = 100;
// do something when the page finished to load all the images
console.log('loading completed!!!');
$('#loadingProgress').append('<div>loading completed!!!</div>');
}
console.log(loadCount + '%');
$('#loadingProgress').append('<div>' + loadCount + '%</div>');
}).attr('src', backgroundImageArray[i - 1]);
}
$(document).ready(function () {
$('*').each(function () {
var backgroundImage = $(this).css('background-image');
var putInArray = false;
var check = backgroundImage.substr(0, 3);
if (check == 'url') {
backgroundImage = backgroundImage.split('url(').join('').split(')').join('');
backgroundImage = backgroundImage.replace('"', '');
backgroundImage = backgroundImage.replace('"', '');
if (backgroundImage.substr(0, 4) == 'http') {
backgroundImage = backgroundImage;
}
putInArray = true;
} else if ($(this).get(0).tagName == 'IMG') {
backgroundImage = $(this).attr('src');
putInArray = true;
}
if (putInArray) {
backgroundImageArray[backgroundImageArray.length] = backgroundImage;
}
});
backgroundLoading(1);
});
function preload(imgs) {
$(imgs).each(function(index, value) {
$('<img />').attr('src', value).appendTo('body').css('display', 'none');
});
}
.attr('src',value) 而不是 .attr('src',this)
只是想指出一下 :)
$.each的回调函数内部的this作用域被分配为正在迭代的值。 - Oybek$("div").each(function(i, el){ console.log(el == this);}); 会生成所有的 true；但是对数组进行迭代似乎表现不同。 - Oybek$('<img src="'+ imgPaht +'">').load(function() {
$(this).width(some).height(some).appendTo('#some_target');
});
如前所述，这将预加载图像，然后使用处理程序在加载img URL后附加img对象。jQuery的文档警告说，缓存的图像与此事件/处理程序代码不兼容，但在FireFox和Chrome中它对我有效，并且我不必担心IE。
5行CoffeeScript代码
array = ['/img/movie1.png','/img/movie2.png','/img/movie3.png']
$(document).ready ->
for index, image of array
img[index] = new Image()
img[index].src = image
对于那些了解一点ActionScript的人，您可以轻松检查Flash播放器并制作Flash预加载器，还可以将其导出到HTML5 / JavaScript / JQuery。 如果未检测到Flash播放器，请查看如何使用YouTube回滚到HTML5播放器的示例，并创建自己的预加载器。 我目前没有详细信息，因为我还没有开始，如果我没有忘记，我会稍后发布并尝试一些标准JQuery代码。