关于图片延迟加载技术-ImageLazyLoad
2010-12-30 10:14
471 查看
关于图片延迟加载技术的优点与缺点(http://www.ok22.org/art_detail.aspx?id=88)
因为工作需要所以最近研究了一下淘宝、QQ、拍拍等几个大型网站的图片延迟加载技术！所以与大家分享一下，仅是代表我的个人观点
图片延迟加载技术（ImageLazyLoad），在页面上图片比较多的时候，打开一张页面必然引起与服务器大数据量的交互。尤其是对于高清晰的图片，占的几M的空间。ImageLazyLoad技术就是，当前可是界面的图片是加载进来的，而不可见页面（通过滚动条下拉可见）中的图片是不加载的，这样势必会引起速度上质的提升。
使用此技术的网站有太多太多，如淘宝，还有一些动漫网站，眼下比较常用的图片延迟加载技术有四种：kissy(淘宝的JS框架),Jquery 图片延迟插件，Prototype，YUI 2。
YUI的图片延迟技术是就成熟的，Jquery的图片延迟插件的设计灵感就来自于YUI的延迟技术（Lazyloader is inspired by YUI ImageLoader Utility by Matt Mlinac），闲话不说，一起来看看如何使用。
Html代码
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>js延时加载</title>
<script type="text/javascript">
lazyLoad = (function () {
var map_element = {};
var element_obj = [];
var download_count = 0;
var last_offset = -1;
var doc_body;
var doc_element;
var lazy_load_tag;
function initVar(tags) {
doc_body = document.body;
//判断是否为IE的"怪异模式"
doc_element = document.compatMode == 'BackCompat' ? doc_body : document.documentElement;
lazy_load_tag = tags || ["img", "iframe"];
};
function initElementMap() {
//var all_element = [];
//从所有相关元素中找出需要延时加载的元素
for (var i = 0, len = lazy_load_tag.length; i < len; i++) {
var el = document.getElementsByTagName(lazy_load_tag[i]);
for (var j = 0, len2 = el.length; j < len2; j++) {
if (typeof (el[j]) == "object" && el[j].getAttribute("lazy_src")) {
element_obj.push(el[j]);
}
}
}
for (var i = 0, len = element_obj.length; i < len; i++) {
var o_img = element_obj[i];
var t_index = getAbsoluteTop(o_img); //得到图片相对document的距上距离
if (map_element[t_index]) {
map_element[t_index].push(i);
} else {
//按距上距离保存一个队列
var t_array = [];
t_array[0] = i;
map_element[t_index] = t_array;
download_count++; //需要延时加载的图片数量
}
}
};
function initDownloadListen() {
if (!download_count) return;
var offset = (window.MessageEvent && !document.getBoxObjectFor) ? doc_body.scrollTop : doc_element.scrollTop;
//可视化区域的高=offtset+document的高
var visio_offset = offset + doc_element.clientHeight;
if (last_offset == visio_offset) {
setTimeout(initDownloadListen, 200);//每隔0.2秒检测一次，这玩意儿感觉有些耗资源的
return;
}
last_offset = visio_offset;
var visio_height = doc_element.clientHeight;
var img_show_height = visio_height + offset;
for (var key in map_element) {
if (img_show_height > key) {
var t_o = map_element[key];
var img_vl = t_o.length;
for (var l = 0; l < img_vl; l++) {
element_obj[t_o[l]].src = element_obj[t_o[l]].getAttribute("lazy_src");
}
delete map_element[key];
download_count--;
}
}
setTimeout(initDownloadListen, 200);
};
function getAbsoluteTop(element) {
if (arguments.length != 1 || element == null) {
return null;
}
var offsetTop = element.offsetTop;
while (elementelement = element.offsetParent) {
offsetTop += element.offsetTop;
}
return offsetTop;
}
function init(tags) {
initVar(tags);
initElementMap();
initDownloadListen();
};
return {
init: init
}
})();
</script>
<style type="text/css">
img{height:800px}
</style>
</head>
<body>
<div>
<img lazy_src="http://pic.vlike.com/girl/UploadFiles_9401/201005/13/2010051307474029890_big.jpg" /><br/>
<img lazy_src="http://pic.vlike.com/girl/UploadFiles_9401/201005/13/2010051307474372951_big.jpg" /><br/>
<img lazy_src="http://pic.vlike.com/girl/UploadFiles_9401/201005/06/2010050616595471474_big.jpg" /><br/>
<img lazy_src="http://pic.vlike.com/girl/UploadFiles_9401/201005/13/2010051307474693772_big.jpg" /><br/>
<img lazy_src="http://pic.vlike.com/girl/UploadFiles_9401/201005/05/2010050511370456961_big.jpg" /><br/>
<img lazy_src="http://pic.vlike.com/girl/UploadFiles_9401/201005/13/2010051311000442310_big.jpg" /><br/>
</div>
<script type="text/javascript">
lazyLoad.init();
</script>
</body>
</html>
LazyLoad(延迟加载)技术不仅仅用在对网页中图片的延迟加载，对数据同样可以，Google Reader和Bing图片搜索就把LazyLoad技术运用的淋漓尽致；
但做为技术而言没有十全十美的技术，缺点也是有的：
1.与Ajax技术的冲突；
2.图片的延迟加载，遇到高度特别高的图片，会出现停止加载的问题；
3.写代码不规范的朋友要注意了，不管由于什么原因，如果您的页面中，img标签的height属性未定义，那么我建议您最好不要使用 ImageLazyLoad。
因为工作需要所以最近研究了一下淘宝、QQ、拍拍等几个大型网站的图片延迟加载技术！所以与大家分享一下，仅是代表我的个人观点
图片延迟加载技术（ImageLazyLoad），在页面上图片比较多的时候，打开一张页面必然引起与服务器大数据量的交互。尤其是对于高清晰的图片，占的几M的空间。ImageLazyLoad技术就是，当前可是界面的图片是加载进来的，而不可见页面（通过滚动条下拉可见）中的图片是不加载的，这样势必会引起速度上质的提升。
使用此技术的网站有太多太多，如淘宝，还有一些动漫网站，眼下比较常用的图片延迟加载技术有四种：kissy(淘宝的JS框架),Jquery 图片延迟插件，Prototype，YUI 2。
YUI的图片延迟技术是就成熟的，Jquery的图片延迟插件的设计灵感就来自于YUI的延迟技术（Lazyloader is inspired by YUI ImageLoader Utility by Matt Mlinac），闲话不说，一起来看看如何使用。
Html代码
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>js延时加载</title>
<script type="text/javascript">
lazyLoad = (function () {
var map_element = {};
var element_obj = [];
var download_count = 0;
var last_offset = -1;
var doc_body;
var doc_element;
var lazy_load_tag;
function initVar(tags) {
doc_body = document.body;
//判断是否为IE的"怪异模式"
doc_element = document.compatMode == 'BackCompat' ? doc_body : document.documentElement;
lazy_load_tag = tags || ["img", "iframe"];
};
function initElementMap() {
//var all_element = [];
//从所有相关元素中找出需要延时加载的元素
for (var i = 0, len = lazy_load_tag.length; i < len; i++) {
var el = document.getElementsByTagName(lazy_load_tag[i]);
for (var j = 0, len2 = el.length; j < len2; j++) {
if (typeof (el[j]) == "object" && el[j].getAttribute("lazy_src")) {
element_obj.push(el[j]);
}
}
}
for (var i = 0, len = element_obj.length; i < len; i++) {
var o_img = element_obj[i];
var t_index = getAbsoluteTop(o_img); //得到图片相对document的距上距离
if (map_element[t_index]) {
map_element[t_index].push(i);
} else {
//按距上距离保存一个队列
var t_array = [];
t_array[0] = i;
map_element[t_index] = t_array;
download_count++; //需要延时加载的图片数量
}
}
};
function initDownloadListen() {
if (!download_count) return;
var offset = (window.MessageEvent && !document.getBoxObjectFor) ? doc_body.scrollTop : doc_element.scrollTop;
//可视化区域的高=offtset+document的高
var visio_offset = offset + doc_element.clientHeight;
if (last_offset == visio_offset) {
setTimeout(initDownloadListen, 200);//每隔0.2秒检测一次，这玩意儿感觉有些耗资源的
return;
}
last_offset = visio_offset;
var visio_height = doc_element.clientHeight;
var img_show_height = visio_height + offset;
for (var key in map_element) {
if (img_show_height > key) {
var t_o = map_element[key];
var img_vl = t_o.length;
for (var l = 0; l < img_vl; l++) {
element_obj[t_o[l]].src = element_obj[t_o[l]].getAttribute("lazy_src");
}
delete map_element[key];
download_count--;
}
}
setTimeout(initDownloadListen, 200);
};
function getAbsoluteTop(element) {
if (arguments.length != 1 || element == null) {
return null;
}
var offsetTop = element.offsetTop;
while (elementelement = element.offsetParent) {
offsetTop += element.offsetTop;
}
return offsetTop;
}
function init(tags) {
initVar(tags);
initElementMap();
initDownloadListen();
};
return {
init: init
}
})();
</script>
<style type="text/css">
img{height:800px}
</style>
</head>
<body>
<div>
<img lazy_src="http://pic.vlike.com/girl/UploadFiles_9401/201005/13/2010051307474029890_big.jpg" /><br/>
<img lazy_src="http://pic.vlike.com/girl/UploadFiles_9401/201005/13/2010051307474372951_big.jpg" /><br/>
<img lazy_src="http://pic.vlike.com/girl/UploadFiles_9401/201005/06/2010050616595471474_big.jpg" /><br/>
<img lazy_src="http://pic.vlike.com/girl/UploadFiles_9401/201005/13/2010051307474693772_big.jpg" /><br/>
<img lazy_src="http://pic.vlike.com/girl/UploadFiles_9401/201005/05/2010050511370456961_big.jpg" /><br/>
<img lazy_src="http://pic.vlike.com/girl/UploadFiles_9401/201005/13/2010051311000442310_big.jpg" /><br/>
</div>
<script type="text/javascript">
lazyLoad.init();
</script>
</body>
</html>
LazyLoad(延迟加载)技术不仅仅用在对网页中图片的延迟加载，对数据同样可以，Google Reader和Bing图片搜索就把LazyLoad技术运用的淋漓尽致；
但做为技术而言没有十全十美的技术，缺点也是有的：
1.与Ajax技术的冲突；
2.图片的延迟加载，遇到高度特别高的图片，会出现停止加载的问题；
3.写代码不规范的朋友要注意了，不管由于什么原因，如果您的页面中，img标签的height属性未定义，那么我建议您最好不要使用 ImageLazyLoad。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 关于图片延迟加载技术-ImageLazyLoad
- JavaScript——图片延迟加载技术（ImageLazyLoad）
- ionic图片资源懒加载，延迟加载—— ionic-image-lazy-load
- jquery.lazyload 插件实现图片延迟加载
- 网页图片延迟加载LazyLoad.js使用方法介绍和实例
- 延迟加载图片插件LazyLoad.js的使用方法
- jQuery Lazy Load 图片延迟加载
- 使用jQuery lazyload 实现图片延迟加载
- Jquery.LazyLoad.js实现图片延迟加载功能
- 前端性能优化--图片懒加载(lazyload image)
- Jquery.LazyLoad.js修正版下载，实现图片延迟加载插件
- （转）jQuery插件:Image lazy loader图片延迟加载
- jquery插件实现图片延迟加载（lazyload.js）
- 两种图片延迟加载的方法总结jquery.scrollLoading.js与jquery.lazyload.js
- jQuery Lazy Load 图片延迟加载
- jQuery图片延迟加载插件jQuery.lazyload
- jQuery图片延迟加载插件：jquery.lazyload
- jquery.lazyload.js图片延迟加载
- Jquery.LazyLoad.js修正版下载，实现图片延迟加载插件
- jQuery Lazy Load 图片延迟加载