虚拟代理实现图片加载优化

   我们在浏览网页的时候首先显示一个默认图片，之后把加载过后应该显示的图片给替换上去，这样的话用户体验和很好，而且那个默认图片因为在缓存中有，而不会导致页面有种很空的感觉。
代码:

// 图片加载优化
class PreLoadImage {
    constructor(imgNode) {
        // 获取真实的DOM节点
        this.imgNode = imgNode
    }
    // 操作img节点的src属性
    setSrc(imgUrl) {
        this.imgNode.src = imgUrl
    }
}
class ProxyImage {
    // 占位图的url地址
    static LOADING_URL = defaultImgUrl
    constructor(targetImage) {
        // 目标Image，即PreLoadImage实例
        this.targetImage = targetImage
    }
    // 该方法主要操作虚拟Image，完成加载
    setSrc(targetUrl) {
        // 真实img节点初始化时展示的是一个占位图,这里的setSrc是PreLoadImage里边的方法
        this.targetImage.setSrc(ProxyImage.LOADING_URL)
        // 创建一个帮我们加载图片的虚拟Image实例
        const virtualImage = new Image()
        // 监听目标图片加载的情况，完成时再将DOM上的真实img节点的src属性设置为目标图片的url
        virtualImage.onload = () => {
            //virtualImage图片加载好给实例赋值过去
            this.targetImage.setSrc(targetUrl)
        }
        // 设置src属性，虚拟Image实例开始加载图片
        virtualImage.src = targetUrl
        // 去除监听的img函数
        this.targetImage.imgNode.removeAttribute("onload")
    }
}
// 操作img的函数接收一个img dom元素，其下一个元素需要是图片的url地址
function operatorImgFn(event) {
    let tempEle = new PreLoadImage(event)
    let operatorEle = new ProxyImage(tempEle)
    if (!event.getAttribute('data-url') || event.getAttribute('data-url') == 'null' || event.getAttribute('data-url') == 'undefined') {
        return
    }
    operatorEle.setSrc(event.getAttribute('data-url'))
}

//用法
<img src='默认显示的图片' data-url='应该显示的图片' onload='operatorImgFn(this)'>

这周也没学啥新技术，主要改bug，之后要多看点好的页面，有些东西也要多考虑用户体验，不能因为懒而不写，之后继续加油吧！！！