代理设计模式在页面中的应用

无聊新手哈哈

于 2017-11-29 11:58:56 发布

阅读量187

点赞数

分类专栏： web前端开发文章标签：设计模式

本文链接：https://blog.csdn.net/ca817586/article/details/78663770

版权

web前端开发专栏收录该内容

24 篇文章 1 订阅

订阅专栏

有些网站运行加载慢, 或者请求的图片特别大 ,我们可以用代理模式预加载的形式

var imgSrc2 = 'http://www.kentguitarclassics.com/wp-content/uploads/2017/05/Stephen-Hill-2017-219-Front-350x476.jpg';
    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.src = '/load.gif';
                img.src = src;
            }
        }
    })()

    proxyImage.setSrc(imgSrc2);