以HTML预加载图像

Question

I want to preload these 4 images. I tried this:

<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">

It didn't work so I tried this instead:

new Image().src = "img/1.jpg";
new Image().src = "img/1a.jpg";
new Image().src = "img/1b.jpg";
new Image().src = "img/1c.jpg";

The JS method worked with the background but not with these.

Answer 1

Try utilizing $.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"> 

Answer 2

This never actually appends anything to the DOM, I used an array to keep references of the created images, and pass them to an optional callback

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);
        }
    }
}

Answer 3

Instead of setting the images themselves to display: none; , set it on the container.

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>