js的 image 属性 和一个预加载模块

Posted 2020-07-25 快乐~

创建一个Image对象：var a=new Image();    定义Image对象的src: a.src=”xxx.gif”;    这样做就相当于给浏览器缓存了一张图片。

 

图像对象：

建立图像对象：图像对象名称=new Image([宽度],[高度])

图像对象的属性： border complete height hspace lowsrc name src vspace width

图像对象的事件：onabort onerror onkeydown onkeypress onkeyup onload

需要注意的是：src 属性一定要写到 onload 的后面，否则程序在 IE 中会出错。

 

‘use strict‘;

/**
 * 预加载图片函数
 * @param {Object} images 加载图片的数组或者对象
 * @param {Object} callback    全部图片加载完毕后调用的回调函数
 * @param {Object} timeout  加载超时的时长
 */
function loadImage(images,callback,timeout){
    //加载完成图片的计数器
    var count = 0;
    //全部图片加载成功的一个标志位
    var success = true;
    //超时timer的id
    var timeoutId = 0;
    //是否加载超时的标志位
    var isTimeout = false;
    //对图片数组（或者对象）进行遍历
    for(var key in images) {
        //过滤prototype上的属性
        if(!images.hasOwnProperty(key)){
            continue;
        }
        //获取每个图片元素
        //期望格式是个object：{src：xxx}
        
        var item = images[key];
        
        if(typeof item === ‘string‘){
            item = iamges[key] = {src:item};
        }
        //如果格式不满足期望，则丢弃那条向下遍历
        if( !item || !item.src){
            continue;
        }
        
        //计数+1
        count++;
        
        //设置图片元素的id
        item.id = ‘__img__‘ + key + getId();
        //设置图片元素的img，它是一个Image对象
        item.img = window[item.id] = new Image();
        
        doLoad(item);
    }
    //遍历完成如果计数位0，则直接返回
    if(!count){
        callback(success);
    }else if(timeout) {
        timeoutId = setTimeout(onTimeout,timeout);
    }
    
    
    /**
     * 真正进行图片加载的函数
     * @param {Object} item 图片元素对象
     */
    function doLoad(item){
        item.status = ‘loading‘;
        var img = item.img;
        //定义图片加载成功的回调函数
        img.onload = function(){
            success = success & true;
            item.status = ‘loaded‘;
            done();
        };
        
        //定义图片加载失败的回调函数
        img.onerror = function(){
            success = false;
            item.status = ‘error‘;
            done();
        };
        
//        发起了一个http(s)发起请求
        img.src = item.src;
        /**
         * 每张图片加载完成的回调函数
         */
        function done(){
            img.onload = img.onerror = null;
            try{
                delete window[item.id];
            }catch(e){
                
            }
            /**
             * 每张图片加载完成，计数器减一，当所有图片加载完成且没有超时的情况清除超时技数器
             */
            if(!--count && !isTimeout) {
                clearTimeout(timeoutId);
                callback(success);
            }
            
        }
    }
    /**
     * 超时函数
     */
    function onTimeout(){
        isTimeout = true ;
        callback (false)
    }
}

var __id = 0;
function getId(){
    return ++_id;
}
module.exports = loadImage;