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

一、场景

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.csdn.net/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);
}()