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);
}