js图片预加载与延迟加载
浏览数：22 /
时间：2015年06月09日
图片预加载的机制原理：就是提前加载出图片来，给前端的服务器有一定的压力。
图片延迟加载的原理：为了缓解前端服务器的压力，延缓加载图片，符合条件的时候再加载图片，当然不符合的条件就不加载图片。?
预加载的实现目的：为了实现更好的用户体验。劣势：会消耗前端服务器的性能。
延迟加载的实现目的：为了优化服务器前端的性能，减少请求次数。 实现方式：
1.第一种是纯粹的延迟加载，使用setTimeOut或setInterval进行加载延迟.
2.第二种是条件加载，符合某些条件，或触发了某些事件才开始异步下载。
3.第三种是可视区加载，即仅加载用户可以看到的区域，这个主要由监控滚动条来实现，一般会在距用户看到某图片前一定距离遍开始加载，这样能保证用户拉下时正好能看到图片。
预加载的js:
<script type="text/javascript">
var oLi=document.getElementsByTagName(‘li‘),
oImgs =document.getElementsByTagName(‘img‘);
//把第二张也缓存了。
var oImg = new Image();
oImg.src = aImgs[0];
//把第二张图片缓存到本地
var oImg1 = new Image();
oImg1.src = aImgs[1];
for (var i =0;i< oLi.length ; i++) {
oLi[i].nIndex =i;
oLi[i].onclick = function () {
oImgs[this.nIndex].src =aImgs[this.nIndex]
// body...
}
};
</script>
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
