虚拟代理实现图片预加载

图片懒加载是一种提升用户体验的技术手段，比如我们开发中遇见需要加载的图片体积很大或者网络环境不佳的情况下，导致图片不能及时展示在界面上时，可以先将一个很小占位图展示出来，等真正要展示的图片加载完毕后在替换下图片资源。下面我们看下使用虚拟代理实现的图片预加载代码。

const DEFAULT_IMG = 'loading.gif';

const renderImage = (function () {
    const imgNode = document.createElement('img');
    document.body.appendChild(imgNode);

    return {
        setSrc(src) {
            imgNode.src = src;
        },
    };
})();

const proxyImage = (function () {
    const img = new Image();
    img.onload = function () {
        renderImage.setSrc(this.src);
    };

    return {
        setSrc(src) {
            renderImage.setSrc(DEFAULT_IMG);
            img.src = src;
        }
    };
})();

proxyImage.setSrc('../images/index.png');