码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2016-06-15 01:29:14      阅读:226      评论:0      收藏:0      [点我收藏+]

标签:

创建一个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;

 

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

标签:

原文地址:http://www.cnblogs.com/chenjinxinlove/p/5585904.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!