如何使用 jQuery 高效预加载图像？

Mary-Kate Olsen

发布： 2024-12-18 00:20:10

原创

860 人浏览过

How Can I Efficiently Preload Images with jQuery?

使用 jQuery 高效预加载图像

如果您正在寻求一种简化的方法来使用 JavaScript 和 jQuery 预加载图像，请考虑以下解决方案：

快速简单方法

想要轻量级且直接的方法，请尝试这个函数：

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

登录后复制

用法：

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

登录后复制

jQuery 插件

如果您喜欢基于插件的解决方案：

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

登录后复制

用法：

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

登录后复制

这些方法提供了一种快速、简单且高效的方法来在 jQuery 中预加载图像。

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

来源：php.cn

上一篇：JavaScript 的 Nullish Coalescing Operator (??) 如何解决 Null 和未定义的处理问题？下一篇：Slice 与 For 循环：JavaScript 中浅克隆数组哪个更快？

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

作者最新文章