js设计模式之代理模式

应用场景图片懒加载

javascript 复制代码
class MyImage {
    constructor() {
        this.img = new Image()
        document.body.appendChild(this.img)
    }
    setSrc(src) {
        this.img.src = src
    }
}

class ProxyImage {
    constructor() {
        this.proxyImage = new Image()
    }

    setSrc(src) {
        let myImageObj = new MyImage()
        myImageObj.img.src = 'file://xxx.png'  //为本地图片url
        this.proxyImage.src = src
        this.proxyImage.onload = function() {
            myImageObj.img.src = src
        }
    }
}

var proxyImage = new ProxyImage()
proxyImage.setSrc('http://xxx.png') //服务器资源url
相关推荐
街尾杂货店&28 分钟前
css - 实现三角形 div 容器,用css画一个三角形(提供示例源码)简单粗暴几行代码搞定!
前端·css
顺凡32 分钟前
删一个却少俩:Antd Tag 多节点同时消失的原因
前端·javascript·面试
小白路过34 分钟前
CSS transform矩阵变换全面解析
前端·css·矩阵
爬山算法42 分钟前
Redis(110)Redis的发布订阅机制如何使用?
前端·redis·bootstrap
REDcker1 小时前
前端打包工具 - Rollup 打包工具笔记
前端·笔记
前端大卫1 小时前
动态监听DOM元素高度变化
前端·javascript
Cxiaomu1 小时前
React Native App 图表绘制完整实现指南
javascript·react native·react.js
前端大卫1 小时前
Webpack 老项目的优化实践
前端
执笔论英雄1 小时前
【大模型训练】加载load_state 中的一些技巧 工厂设计模式
设计模式
开利网络1 小时前
合规底线:健康产品营销的红线与避坑指南
大数据·前端·人工智能·云计算·1024程序员节