js懒加载与预加载

js懒加载
意义
懒加载（LazyLoad）是前端优化的一种有效方式，能极大的提升用户体验，图片加载是其重点，如果加载图片过多将大大增http请求次数或大小，然而更多时候用户并不会浏览到全部加载进来的图片，这种代价是非常不值得的，所以当用户浏览到当前视口时再去加载相应的图片无疑是两全其美的选择

原理
只有img标签中的src写入了图片的地址，加载页面时才会请求图片，所以使用懒加载时在src中并不写入任何地址，把图片的真实地址放到data- (标签内部属性可存数据)属性中，在js中绑定鼠标滚动事件，其回调中遍历所有图片并作出判断，将出现在视口中的图片的 ‘data-’ 属性保存的地址放到 ‘src’ 中即可

实现
实现方式：原生js
HTML

js懒加载

引入一堆图片src为空，地址写在data-original中，onerror表示当未加载图片时显示的临时加载页图片

JavaScript

window.onload = function () {
//获取当前浏览器的视口高度
var viewHeight = document.documentElement.clientHeight;

//鼠标滚动回调
function lazyload() {
    var img = document.getElementsByClassName('img'); //获取所有图片集合

    //遍历图片集合
    for (let item of img) {
        //获取图片距视口顶部的距离
        var imgHeight = item.getBoundingClientRect();
        //判断当图片出现在视口160px时把地址放到src中，显示出图片
        if (imgHeight.top < (viewHeight - 160)) {
            item.src = item.getAttribute("data-original")
        }
    }
}

lazyload();    //页面加载时把当前视口中的图片加载进来
document.addEventListener('scroll', lazyload);

}
当图片进入到视口160px时将会加载进来

效果
懒加载效果.jpg

当图片滚动到视口范围内才会加载该图片

js预加载
意义
与懒加载相反，有时我们需要实现例如快速快速切换页面、图片之类的功能时，能尽快的加载出我们所需的图片会极大提升用户体验，这时用预加载将图片先缓存到浏览器，用户使用需显示图片时无疑会顺畅很多

原理
在html中用img标签
使用JavaScript的Imgage对象
ajax请求图片
preload.js插件
实现
1.使用html文档中img标签

执行文档时直接加载进来只不过让其不显示

2.使用Imgage对象

var img=new Image()
img.src=“http://www.wwenj.com/img/1.jpg”
js中执行到该语句后就会加载进来

3.使用ajax请求图片

直接用ajax请求很好理解不贴代码，
优点：ajax请求过程中能有更加详细的操作
缺点：有跨域

4. preload.js预加载插件

PreloadJS便于预先加载资源：图像、声音、数据、或其他的JS
PreloadJS插件地址：http://www.createjs.cc/preloadjs/

PreloadJS提供了一个一致的方式预先加载在HTML应用的内容，以及预加载可以使用HTML标签作为XHR完成。
默认， PreloadJS 将尝试使用XHR加载内容，因为它提供了进度和完成事件方面的更好支持，然而由于跨域的问题，它可能仍然是优选使用基于标签的负载代替

var queue = new createjs.LoadQueue();

queue.on(“complete”, handleComplete, this);
queue.loadManifest([
{id: “myImage”, src:“path/to/myImage.jpg”}
]);
function handleComplete() {
var image = queue.getResult(“myImage”);
document.body.appendChild(image);
}
这是官网上的例子，使用起来也很简单，对预加载过程有更高的控制，详细了解请到官网学习

总结
预加载与懒加载的使用频繁，理解起来也并不难，简单学习之后做了此总结
非原创文章

原网址：http://blog.wwenj.com/index.php/archives/49/