我想预加载这 4 个图像。我试过这个：
<img src="img/1.jpg" style="display:none">
<img src="img/1a.jpg" style="display:none">
<img src="img/1b.jpg" style="display:none">
<img src="img/1c.jpg" style="display:none">
它没有用，所以我尝试了这个：
new Image().src = "img/1.jpg";
new Image().src = "img/1a.jpg";
new Image().src = "img/1b.jpg";
new Image().src = "img/1c.jpg";
JS 方法适用于背景，但不适用于这些。
尝试利用$.Deferred()，.queue()
var images = ["http://lorempixel.com/1200/800/cats/"
, "http://lorempixel.com/1200/800/nature/"
, "http://lorempixel.com/1200/800/animals/"
, "http://lorempixel.com/1200/800/technics/"
];
// do stuff when image loaded
var loadImage = function loadImage(elem) {
return $(elem).fadeTo(500, "1.0", "linear");
};
// load images
var loadImages = function loadImages(urls, image, complete) {
// `this` : `document`
urls.forEach(function(imageSrc, i) {
var img = new Image;
var dfd = new $.Deferred();
// return `this` : `document`
dfd.then(function(ready) {
loadImage(ready);
return this
}, function(error) {
console.log(error)
})
.always(function() {
console.log(complete, urls.length);
return urls.length === complete
? $(this)
.data("complete", complete + " images loaded")
.dequeue("images") // when all images loaded
: this
});
// log errors
img.onerror = dfd.reject;
img.onload = function(e) {
complete = this.complete ? ++complete : complete;
dfd.resolveWith(document, [
image.eq(i).prop("src", this.src)
]
);
};
img.src = imageSrc
});
// return `this` : `document`
return this
};
$(window).load(function() {
// init `loadImages`
var complete = 0;
// call `loadImages`,
// `this` context : `document`
loadImages.call(document, images, $(".image"), complete)
});
$(document).ready(function() {
// notify when all images loaded
$(this).queue("images", function() {
console.log($(this).data())
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<!-- note , `src` attribute not included -->
<img class="image" style="opacity:0.0" alt="1">
<img class="image" style="opacity:0.0" alt="1a">
<img class="image" style="opacity:0.0" alt="1b">
<img class="image" style="opacity:0.0" alt="1c">这实际上从未向 DOM 附加任何内容，我使用了一个数组来保留对创建的图像的引用，并将它们传递给可选的回调
var paths = [
"img/1.jpg",
"img/1a.jpg",
"img/1b.jpg",
"img/1c.jpg"
];
preloadImages(paths);
function preloadImages(paths, callback) {
var images = [];
var loaded = 0;
paths.forEach(function (path) {
var img = new Image();
img.src = path;
img.onload = onImagePreloaded;
images.push(img);
});
function onImagePreloaded() {
loaded++;
if (loaded === paths.length && callback) {
callback(images);
}
}
}
不要将图像本身设置为display: none;，而是将其设置在容器上。
CSS：
.preload {
display: none;
}
HTML：
<div class="preload">
<img src="img/1.jpg">
<img src="img/1a.jpg">
<img src="img/1b.jpg">
<img src="img/1c.jpg">
</div>