标签：keyword lazy 提前 本地 事件 区域图 getattr url body
1.什么是预加载？
提前加载图片，当用户需要查看时可直接从本地缓存中渲染。
2：什么是懒加载？
延迟加载图片，当用户需要的时候再去加载图片
当我们访问一些类似电商网站，遇到图片很多情况下，需要浏览器去下载这些图片，遇到网速比较慢的时候，用户等待的时间特别长，造成很不好的用户体验。这样的话，就有可能导致一部分的用户没有耐心，而丢失这部分用户。
图片的预加载是提升用户体验而损失性能的一种做法，而懒加载的性能就比较好，所以将两个结合起来放到web程序中是一种不错的选择。
预加载
Image 对象在客户端预先加载图像。可以像使用<img>元素一样使用Image 对象，只不过无法将其添加到DOM 树中。
function preloadImg(url) {
var img = new Image();
img.src = url;
if(img.complete) {//如果图片已经存在于浏览器缓存，接下来可以使用图片了
//do something here
} else {
img.onload = function() {//无论浏览器是否存在图片缓存,重新请求图片地址,都会触发onload事件
//接下来可以使用图片了
//do something here
};
}
}
懒加载：
实现原理：将图片src赋值为一张默认图片，当用户滚动滚动条到可视区域图片时候，再去加载真正的图片。
var num = document.getElementsByTagName(‘img‘).length;
var img = document.getElementsByTagName("img");
var n = 0; //存储图片加载到的位置，避免每次都从第一张图片开始遍历
lazyload(); //页面载入完毕加载可是区域内的图片
window.onscroll = lazyload;//滚动滚动条依次触发
function lazyload() { //监听页面滚动事件
var seeHeight = document.documentElement.clientHeight; //可见区域高度
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; //滚动条距离顶部高度
// console.log(seeHeight);
//console.log(scrollTop);
for (var i = n; i < num; i++) {
if (img[i].offsetTop < seeHeight + scrollTop) {
if (img[i].getAttribute("src") == "default.jpg") {
img[i].src = img[i].getAttribute("setsrc");
}
n = i + 1;
}
}
}
标签：keyword lazy 提前 本地 事件 区域图 getattr url body
原文地址：http://www.cnblogs.com/CDtao/p/6916699.html
