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>
  • 相关阅读:
    81. Search in Rotated Sorted Array II (Array; Divide-and-Conquer)
    LeetCode Word Ladder
    LeetCode Word Search II
    LeetCode Invert Binary Tree
    LeetCode Implement Stack using Queues
    Bash:字符串操作
    LeetCode Basic Calculator
    LeetCode Rectangle Area
    Java 远程调试
    LeetCode Count Complete Tree Nodes
  • 原文地址:https://www.cnblogs.com/somesayss/p/2748888.html
Copyright © 2011-2022 走看看