美文网首页
图片预加载

图片预加载

作者: u14e | 来源:发表于2017-06-16 09:43 被阅读12次
    var myImage = (function() {
        var imgNode = document.createElement('img');
        document.body.appendChild(imgNode);
    
        var img = new Image();
    
        img.onload = function() {
            imgNode.src = img.src;
        }
    
        return {
            setSrc: function(src) {
                imgNode.src = 'images/ajaxing.gif';
                img.src = src;
            }
        }
    })();
    
    myImage.setSrc('http://tse4.mm.bing.net/th?id=OIP.puFzgpLnlMDZoFso0eSbIQDIEs&pid=15.1');
    

    虚拟代理实现

    var myImage = (function() {
        var imgNode = document.createElement('img');
        document.body.appendChild(imgNode);
    
        return {
            setSrc: function(src) {
                imgNode.src = src;
            }
        }
    })();
    
    var proxyImage = (function() {
        var img = new Image();
        img.onload = function() {
            myImage.setSrc(this.src);
        }
    
        return {
            setSrc: function(src) {
                myImage.setSrc('images/ajaxing.gif');
                img.src = src;
            }
        }
    })();
    
    proxyImage.setSrc('http://tse4.mm.bing.net/th?id=OIP.puFzgpLnlMDZoFso0eSbIQDIEs&pid=15.1');
    

    相关文章

      网友评论

          本文标题:图片预加载

          本文链接:https://www.haomeiwen.com/subject/dbypqxtx.html