js图片预加载与延迟加载

图片预加载的机制原理：就是提前加载出图片来，给前端的服务器有一定的压力。

图片延迟加载的原理：为了缓解前端服务器的压力，延缓加载图片，符合条件的时候再加载图片，当然不符合的条件就不加载图片。​　　　　　　

预加载的实现目的：为了实现更好的用户体验。劣势：会消耗前端服务器的性能。

延迟加载的实现目的：为了优化服务器前端的性能，减少请求次数。 实现方式：

 

      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>