微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

代理模式,图片的异步加载分析

<table class="text"><tr class="li1">
<td class="ln"><pre class="de1">1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

函数         var MyImg = (function( ){     return {         setSrc:function(src){                 }     }    })( )     MyImg是一个对象,自执行函数后,返回的是一个JSON Object,   JSON 是方法,setSrc;   闭包环境:函数定义是的上下文环境,即闭包;可以引用到它声明时的变量。   img 代理图片对象就被闭包引用,在自执行函数外无法访问;但是在setSrc里却可以访问。   img oImg 这两个变量现在成为了 MyImg类的私有属性;   this.img this.oImg 在JavaScript没有private 私有属性关键字。   二 过程         首先,定义了oImg,img 两个图片对象,并将oImg最初的图片地址设置为loadImg小图,img作为代理图片,由于没有添加到body内;    所以设置src真正的图片地址,并不会在页面中看到加载的过程。    onload事件的监听,说明图片已下载到浏览器,这时将oImg的src从loading图改为真正的src,这次由于图片已将图片已下载到本地,不会再次触发浏览器的下载,    所以会立即显示,又是会加上一点css的动画效果。   三 用户体验         直接设置img src为真正的大图,会导致页面同一时刻下载太多图片,网页打开速度变慢,而现在异步加载图片,     使用的是回调,所以不会影响;     第一次打开网页的速度,会得到极大的提升。

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐