js 代理模式妙用 —— 优化大图加载时用户体验

曾经终败给现在 2022-11-26 09:44 157阅读 0赞

> 什么是代理模式

代理模式是为一个对象提供一个代用品或占位符，以便控制对它的访问。举个例子：明星与经纪人的关系，明星是请求的本体，经纪人就是代理proxy

> 如何实现代理模式

代理对象内部含有对本体对象的引用，因而可以与调用本体的相关方法；同时，代理对象提供与本体对象相同的接口，方便在任何时刻代理本体对象。

> 代理模式经典的应用场景 —— 大图加载缓冲

大家都应该经历过这种情况：网页内加载图片的时候（无论是手机端还是PC端），当网络情况不佳或是图片过大时，就会出现图片一截一截的慢慢出现，如图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1OTQyMzQ4_size_16_color_FFFFFF_t_70][]

这就产生了非常不友好的体验，卡顿不流畅，会让我们可爱的宝贝用户感觉到很焦虑。

这个时候就可以用到 js的代理模式，图片没有加载完成的时候，干脆就不让用户看到，给一个可爱的loading动画先看着，缓解一下用户无聊的枯燥的心情：

> html 部分

<!DOCTYPE html>
    <html>
        <body>
             <div class="img-con">
                <img  class="img2" src="" height="540"/>
            </div>
            <button class="btn1">请求图片</button>
        </body>
    </html>

> js 部分

> 结语

如果本文有错误，敬请指出。

对大家有帮助的话，欢迎点赞评论或转发，么么哒~

![format_png][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1OTQyMzQ4_size_16_color_FFFFFF_t_70]: /images/20221124/9188366b4e1a4b688b99b80aad73e17b.png
[format_png]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly90aW1nc2EuYmFpZHUuY29tL3RpbWc_aW1hZ2UmcXVhbGl0eT04MCZzaXplPWI5OTk5XzEwMDAwJnNlYz0xNTk3MTU1MzMwMDcyJmRpPWJmYjdkYjkzYWVkNmM4OWE2MGYxM2FmNDIyYWYzNWNkJmltZ3R5cGU9MCZzcmM9aHR0cCUzQSUyRiUyRnd3dy41NTc3LmNvbSUyRnVwJTJGMjAxOC01JTJGMTUyNzY2MjQ2NjYyMjE2MzIuanBn?x-oss-process=image/format,png