zoukankan      html  css  js  c++  java
  • JS_imgload

    <img id="img1" mysrc="http://pic002.cnblogs.com/images/2012/319713/2012103021492628.jpg" width="200" height="248" src="img/tran.gif" style="background:url(img/loading.gif) no-repeat center #CCC;" />
    <img id="img2" mysrc="http://pic002.cnblogs.com/images/2012/319713/2012103021500686.jpg" width="200" height="248" src="img/tran.gif" style="background:url(img/loading.gif) no-repeat center #CCC;"/>
    <img id="img3" mysrc="http://pic002.cnblogs.com/images/2012/319713/2012103021504340.jpg" width="200" height="248" src="img/tran.gif" style="background:url(img/loading.gif) no-repeat center #CCC;"/>
    <script type="text/javascript">
    var Forimgload = function(opat){
        this.opat = opat;
        }
    Forimgload.prototype = {
        loadimgs:function(){        //多张图的加载
            var _this = this,
                _imgurl = _this.opat.imgurl,
                _callback = _this.opat.callback,
                _pand = [],
                _imgload = _this.imgload;
            for(var i=0,j=_imgurl.length;i<j;i++){
                _imgload(_imgurl[i],function(){
                    _pand.push(1);
                    });
                }
            setTimeout(function(){
                if(_pand.length<j){
                    setTimeout(arguments.callee,0);
                    return;
                    }
                _callback();
                _pand = null;
                _callback = null;
                },0)
            },
        loadimg:function(){          //单张图的加载
             var _this = this,
                 _url = _this.opat.imgurl,
                 _callback = _this.opat.callback,
                 _imgload = _this.imgload;
             _imgload(_url,_callback);
             },
        oneload:function(url,callback){
            var _this = this;
            if(!_this.oneimg) _this.oneimg = new Image();
            var _other = new Image();
            var _one = _this.oneimg;
            _one.src = url;
            _other.src = url;
            if(_other.complete == false){
                _one.onload = function(){
                  callback();
                  }
                }else{
                callback();
                }
            console.log("loadind");
            },
        imgload:function(url,callback){    //主加载函数
            var _img = new Image();
            _img.src = url;
            if(_img.complete == false){
                _img.onload = function(){
                    callback();
                    callback = null;
                    };
                }else{
                callback();
                }
            }
        }
    /*new Forimgload({
            imgurl:["http://pic002.cnblogs.com/images/2012/319713/2012103021492628.jpg","http://pic002.cnblogs.com/images/2012/319713/2012103021492628.jpg"],
            callback:function(){
                alert("完成")
                }
            }).loadimgs();
    */
    /*var imgs = document.getElementsByTagName("img");
    var arri
    for(var i=0,j=imgs.length;i<j;i++){
        new Forimgload({
            imgurl:imgs[i].src,
            callback:function(){
                console.log("1");
                }
            }).loadimg();
        }
    */
    
    var but = document.getElementsByTagName("img");
    var d = new Forimgload();
    for(var i=0,j=but.length;i<j;i++){
        but[i].onclick = function(){
            var _src = this.getAttribute("mysrc");
            var _this = this;
            d.oneload(_src,function(){
                alert(1);
                _this.src = _src;
                });
            }
        }
    
    </script>
  • 相关阅读:
    2.16.8.内核启动的C语言阶段5
    2.16.7.内核启动的C语言阶段4
    2.16.6.内核启动的C语言阶段3
    2.16.5.内核启动的C语言阶段2
    JAVA_SE基础——34.static修饰成员变量
    JAVA_SE基础——33.this关键字的练习
    JAVA_SE基础——32.this关键字调用本类的构造方法
    JAVA_SE基础——31.this关键字
    JAVA类的方法调用和变量(全套)
    JAVA_SE基础——30.构造代码块
  • 原文地址:https://www.cnblogs.com/somesayss/p/2748888.html
Copyright © 2011-2022 走看看