How Can I Efficiently Preload Images with jQuery?

Preloading Images Efficiently with jQuery

If you're seeking a streamlined approach to preload images using JavaScript with jQuery, consider the following solutions:

Quick and Easy Method

For a lightweight and straightforward approach, try this function:

function preload(arrayOfImages) {
    $(arrayOfImages).each(function(){
        $('<img/>')[0].src = this;
        // Alternatively:
        // (new Image()).src = this;
    });
}

Usage:

preload([
    'img/imageName.jpg',
    'img/anotherOne.jpg',
    'img/blahblahblah.jpg'
]);

jQuery Plugin

If you prefer a plugin-based solution:

$.fn.preload = function() {
    this.each(function(){
        $('<img/>')[0].src = this;
    });
}

Usage:

$(['img1.jpg','img2.jpg','img3.jpg']).preload();

These methods offer a quick, easy, and efficient way to preload images in jQuery.

The above is the detailed content of How Can I Efficiently Preload Images with jQuery?. For more information, please follow other related articles on the PHP Chinese website!