web新能优化五-图片的预加载

什么是预加载，以及预加载的优点是什么？

• 图片等静态资源在使用之前的提前请求
• 资源使用到时能从缓存中加载，提升用户体验
• 页面展示的依赖关系维护

首先预加载第一种实现方式可以是这样子滴

<!-- 预加载的第一种方式，使用img 的src加载，设置display none 缓存图片 --> <img src="http://pic26.nipic.com/20121213/6168183_004444903000_2.jpg" class="image-item" style="display: none" /> 

第二种实现方式是

// 第二种方式就是使用Image对象提前进行缓存图片,会从缓存中读取下载好的图片资源var image = new Image();image.src = 'http://pic26.nipic.com/20121213/6168183_004444903000_2.jpg';

第三种实现方式可以使用XMLHttpRequset来实现

// 第三种方式就是使用XMLHttpRequrest对象,代码执行顺序如下// 优点是可以掌握各个阶段的信息，便于业务的开发，但是缺点是存在跨域var xmlhttprequest = new XMLHttpRequest();xmlhttprequest.open("GET", "'http://image.baidu.com/mouse.jpg", true);xmlhttprequest.send();xmlhttprequest.onreadystatechange = callback;xmlhttprequest.onprogress = progressCallback;function callback() {    if (xmlhttprequest.readyState == 4 && xmlhttprequest.status == 200) {        var responseText = xml.responseText;    } else {        console.log("Request was unsuccessful: " + xmlhttprequest.status)    }}function progressCallback(e) {    e = e || event;    if (e.lengthComputable) {        console.log("Received " + e.loaded + " of " + e.total + " bytes");    }}

推荐使用第三方库来做前端预加载
preload.js来处理前端预加载资源的业务，提供的api也简单易用

// 使用preload.js库// false决定着使用html标签的方式去加载图片，不使用的话就走XMLHttpRequest方式去加载图片var queue = new createjs.LoadQueue(false);queue.on("complete", handleComplete, this);queue.loadManifest([    { id: "myImage", src: 'http://pic26.nipic.com/20121213/6168183_004444903000_2.jpg' },    { id: "myImage2", src: 'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1069058874,714751845&fm=27&gp=0.jpg' }])function handleComplete() {    var image = queue.getResult("myImage");    document.body.appendChild(image);}