图片懒加载与预加载

预加载

常用的是new Image();，设置其src来实现预载，再使用onload方法回调预载完成事件。

function loadImage(url, callback){var img = new Image(); //创建一个Image对象，实现图片的预下载img.src = url;if (plete){ // 如果图片已经存在于浏览器缓存，直接调用回调函数callback.call(img);return; // 直接返回，不用再处理onload事件}img.onload = function (){ //图片下载完毕时异步调用callback函数。callback.call(img);//将回调函数的this替换为Image对象 ，如果你直接用img.width的时候，图片还没有完全下载下来};}

测试用例：

function imgLoaded(){alert(this.width);}<input type="button" value="loadImage" οnclick="loadImage('aaa.jpg',imgLoaded)"/>

当图片加载过一次以后，如果再有对该图片的请求时，由于浏览器已经缓存住这张图片了，不会再发起一次新的请求，而是直接从缓存中加载过来。对于 firefox和safari，它们视图使这两种加载方式对用户透明，同样会引起图片的onload事件，而ie和opera则忽略了这种同一性，不会引起图片的onload事件 使用img标签或者通过标签的background-image属性都可以实现图片的预加载。但是为了避免初次载入过多图片影响体验。一般最好在文档渲染完成以后再加载（使用window.onload等）。 场景： 如果某一个效果需要更换背景图片，那么图片会临时去加载，这样会出现图片需要一段时间才能显示出来，用户体验就会变差，所以图片需要预加载。比如照片墙，滚动图片什么，需要无缝显示图片的，之前加载好图片才不至于要显示下一张图片的时候临时去拉图片导致显示图片过慢。

懒加载

意义： 懒加载的主要目的是作为服务器前端的优化，缓解服务器前端压力，一次性请求次数减少或延迟请求。 实现方式： 1.第一种是纯粹的延迟加载，使用setTimeOut或setInterval进行加载延迟. 2.第二种是条件加载，符合某些条件，或触发了某些事件才开始异步下载。 3.第三种是可视区加载，即仅加载用户可以看到的区域，这个主要由监控滚动条来实现，一般会在距用户看到某图片前一定距离遍开始加载，这样能保证用户拉下时正好能看到图片。 图片没拉回来也会触发onerror事件

应用场景推荐链接

利用简洁的图片预加载组件提升h5移动页面的用户体验 javascript图片懒加载与预加载的分析 “懒”的妙用——浅析图片懒加载技术 Javascript图片预加载详解