如何使用jQuery快速预加载图片？

使用 jQuery 预加载图像：快速简便指南

虽然可以使用复杂的图像预加载脚本，但本文提供了一种简洁明了的方法使用 jQuery 预加载图像。

jQuery代码

以下代码片段演示了预加载多个图像的简单有效的方法：

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

// Usage:

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

在此代码中，preload() 函数采用图像路径数组并预加载通过创建不可见的 每个图像元素并将其 src 属性设置为图像路径。或者，您也可以使用 (new Image()).src = this 来预加载图像。

替代 jQuery 插件

如果首选插件方法，则下面的代码片段提供了一个简洁的插件：

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

// Usage:

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

这个插件扩展了 jQuery 对象，并允许您通过调用来预加载图像图像路径数组上的 preload() 方法。

使用这些方法，预加载图像将成为一项快速且轻松的任务，确保 Web 应用程序的最佳性能。

以上是如何使用jQuery快速预加载图片？的详细内容。更多信息请关注PHP中文网其他相关文章！