图片预加载

<img src="" alt='error'>
<img src="" alt='error'>
<img src="" >
<img src="">
<img src="">
<img src="">
<img src="">
<img src="">
<img src="">
<img src="">
<img src="">
<img src="">
<img src="">
<img src="">
<img src="">
<img src="">
<img src="">
<img src="" alt='error'>
<img src="">
<img src="">
<img src="">
<img src="">
<img src="">
<img src="">
<script type="text/javascript">
    var imgs =  document.querySelectorAll('img')
    var arr = [
                {url : '错误地址'},
                {url : '正确地址'},
                {url : '正确地址'},
                {url : '正确地址'},
                {url : '正确地址'},
                {url : '正确地址'},
                {url : '正确地址'},
                {url : '正确地址'},
                {url : '正确地址'},
                {url : '正确地址'},
                {url : '正确地址'},
                {url : '正确地址'},
                {url : '正确地址'},
                {url : '正确地址'},
                {url : '正确地址'},
                {url : '正确地址'},
                {url : '正确地址'},
                {url : '错误地址'},
            ]

    function addLoadEvent(func) { //延迟预加载时间，直到页面加载完毕
        var oldonload = window.onload;
        if (typeof window.onload != 'function') {
            window.onload = func;
        } else {
            window.onload = function() {
                if (oldonload) {
                    oldonload();
                }
                func();
            }
        }
    }
    //测试
    addLoadEvent(function(){console.log(123444)})
    addLoadEvent(function(){console.log(123555)})

    function preloadImg(){
        var imgs =  document.querySelectorAll('img')
        if(arr instanceof Array){
            var i, oImg;
            for(i = 0, len = arr.length; i < len; i++){
                oImg = new Image()
                oImg.src = arr[i].url;
                if(oImg.complete) { //complete属性是一个boolean值。如果图片加载成功或者是OImg对象没有src属性,返回的都是true,如果图片已经加载缓存成功，可以跳过onload(比如页面跳转回来以后,图片本地已经有缓存数据了，就不用onload了)
                    console.log('图片加载完成complete')
                    return 
                }
                oImg.onload = (function() {
                    var j = i
                    return function() {
                        imgs[j].src = arr[j].url
                        console.log('图片加载完成onload')
                    }
                }())
                // oImg.src = arr[i].url; 如果加上complete属性判断的话,本行代码就必须放在上面，如果放在本行，则oImg.complete始终为true，则永远不会进入onload函数（原因是OImg对象没有src属性,返回的都是true）
            }
        }
    }

    addLoadEvent(preloadImg)
    console.log('1')
    console.log('2')
    console.log('3')
    console.log('4')
    // 打印顺序1、2、3、4、图片加载完成complete
</script>

图片预加载就是这样实现的，喜欢的点个赞呗，嘻嘻