懒加载和预加载是常用的web优化的手段。所以我们首先应该明白什么是懒加载和预加载。
懒加载：懒加载也加延迟加载，延迟加载网络资源或符合某些条件时才加载资源。常见的就是图片延时加载。
懒加载的意义：懒加载的主要目的是作为服务器前端的优化，减少请求数或延迟请求数。
懒惰实现方式：
1.第一种是纯粹的延迟加载，使用setTimeOut或setInterval进行加载延迟.
2.第二种是条件加载，符合某些条件，或触发了某些事件才开始异步下载。
3.第三种是可视区加载，即仅加载用户可以看到的区域，这个主要由监控滚动条来实现，一般会在距用户看到某图片前一定距离遍开始加载，这样能保证用户拉下时正好能看到图片。
说了这么多，上代码：
//javascript
<script type="text/javascript">
window.onload = function(){
var imgs = Array.from(document.querySelectorAll('img'));
delay();
window.addEventListener('scroll', exec(delay, 4000));
function exec(fun, delaytime){
var timeout,startTime = new Date();
return function(){
clearTimeout(timeout);
tiemout = setTimeout(fun, delaytime);
}
}
function delay(){
var scrollTop = window.scrollY;
var clientHeight = document.documentElement.clientHeight;
//console.log(clientHeight);
imgs.forEach((item, index)=>{
if(scrollTop==0 && item.offsetTop<=clientHeight+scrollTop){
//console.log(item.getAttribute('data_img'));
item.setAttribute('src',item.getAttribute('data_img'));
}else if(item.offsetTop<=clientHeight+scrollTop && item.offsetTop > scrollTop){
item.setAttribute('src',item.getAttribute('data_img'));
}
});
}
}
</script>
从demo的js里面我们可以看出，我们在页面滚动上添加了事件。页面初次加载显示时只会显示页面可视区域的图片，当页面滚动到可视区域后才会加载图片显示图片，如图所示：
两张图可以看出首页加载只显示了两张图片，当向下滚动时继续加载了后边的图片。
预加载：提前加载图片，当用户需要查看时可直接从本地缓存中渲染。
两者的行为是相反的，一个是提前加载，一个是迟缓甚至不加载。懒加载对服务器前端有一定的缓解压力作用，预加载则会增加服务器前端压力。预加载应用如广告弹窗等。
//
var target = document.getElementById('test');
addImg('./2.jpg');
function addImg(url){
var img = document.createElement('img');
var image = new Image();
image.src=url;
image.onload = function(){
img.src = this.src;
img.height = 50;
img.width = 50;
}
target.appendChild(img);
}
//html
<div id="test"></div>
仅以以上两个小列子学习预加载和懒加载。
