图片预加载完成再执行动画，解决动画执行时图片还未加载完成的问题

最新推荐文章于 2022-03-24 16:27:26 发布

web_xyk

最新推荐文章于 2022-03-24 16:27:26 发布

阅读量3.1k

点赞数 1

分类专栏： js 文章标签： js图片预加载 css3动画图片加载慢

本文链接：https://blog.youkuaiyun.com/web_xyk/article/details/81484500

版权

js 专栏收录该内容

32 篇文章

订阅专栏

本文介绍了一种使用Image()构造函数创建屏幕外图片对象的技术，通过预先加载图片到浏览器缓存来提升网页性能。该方法可以有效减少图片加载时间，改善用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、场景

1.多图片衔接动画

2.鼠标指向图片时，图片翻转显示另一张图

等等

二、实现方式

利用 Image()构造函数创建一个屏幕外图片对象，之后将该对象的src属性设置成期望的URL，由于图片元素并没有加载到文档中，因此，它是不可见的，但是浏览器还是会加载图片并将其缓存起来。这样以来，当页面中再有用到该图片的时候就能很快从缓存中加载。就不会出现加载慢导致的图片显示不出来的问题了

三、代码

!function(){
    var imgNeed = ['https://ss1.baidu.com/9vo3dSag_xI4khGko9WTAnF6hhy/image/h%3D300/sign=a919d7dfe524b899c13c7f385e071d59/d52a2834349b033bda94010519ce36d3d439bdd5.jpg',
                    'https://ss3.baidu.com/9fo3dSag_xI4khGko9WTAnF6hhy/image/h%3D300/sign=87d6daed02f41bd5c553eef461d881a0/f9198618367adab4b025268587d4b31c8601e47b.jpg',
                    'https://ss1.baidu.com/-4o3dSag_xI4khGko9WTAnF6hhy/image/h%3D300/sign=215774e902f41bd5c553eef461db81a0/f9198618367adab416a4888187d4b31c8601e4f8.jpg'], // 需要预加载的图片地址列表
        len = imgNeed.length,
        i = 0;

    // showLoading(); 等待弹层，在图片未完成加载时显示等待loading，避免用户进行操作
    // (按需决定添加与否，等待loading如何设置可参考：https://blog.youkuaiyun.com/web_xyk/article/details/80449752)

    function loadImg(i){
        var img = new Image();
        img.src = imgNeed[i];
        console.log(i)
        img.onload = function(){
            if(i++<len-1){
                loadImg(i)
            }else{
                console.log('图片预加载完成')
                // closeLoading(); 如果设置showLoading需要关闭等待loading
            }
        }
    }
    console.log('图片预加载开始')
    loadImg(i);
}()