js-面向对象-图片loading-设计模式-代理模式

1、传统模式下渲染图片

网络卡，会一点一点渲染出结果

    function Myimgge(src) {
        this.oImg = document.createElement("img");
        document.body.appendChild(this.oImg);
        this.src = src;
        this.getSrc();
    }

    Myimgge.prototype.getSrc = function () {
        this.oImg.src = this.src;
    }

    
    new Myimgge("img/1.jpg")
    new Myimgge("img/2.jpg")
    new Myimgge("img/3.jpg")
    new Myimgge("img/4.jpg")

2、通过loading代理  渲染整张图片

    function MyImage(src) {
        //创建节点 并上树
        this.oImg = document.createElement("img");
        document.body.appendChild(this.oImg);
    }

    MyImage.prototype.getSrc = function (src) {
        this.oImg.src = src;
    }

    //代理类
    function MyImageProxy(src) {
        this.myImage = new MyImage();
        // 给图片设置初始的loading状态，防止如果图片不能预期加载，或者图片加载缓慢的时候的替换状态
        this.myImage.getSrc("img/loading.gif");


        // image就是一个 钩子，作用是用来表示当图片加载完毕之后，让MyIamge的实例进行渲染
        var image = new Image();
        image.src = src;

        var self = this;
        // onload表示当图片加载完毕之后，此时的图片是整张图的状态，而不是部分渲染
        image.onload = function () {
            self.myImage.getSrc(src);
        }
    }
    new MyImageProxy("img/1.jpg")
    new MyImageProxy("img/2.jpg")
    new MyImageProxy("img/3.jpg")
    new MyImageProxy("img/4.jpg")