图片延迟加载中使用table的兼容问题修改
2012-08-03 17:06
567 查看
之前下载使用了某位牛人发的图片延迟加载js，下边是我改成竖行排列的代码，使用的是table，对ie6/7兼容。源地址：http://www.cnblogs.com/cloudgamer/archive/2010/03/03/ImagesLazyLoad.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf8" />
<title>图片延迟加载效果</title>
<script src="CJL.0.1.min.js"></script>
<script src="LazyLoad.js"></script>
<script>
var ImagesLazyLoad = $$.wrapper(function(options) {
this._initialize( options );
//如果没有元素就退出
if ( this.isFinish() ) return;
//初始化模式设置
this._initMode();
//进行第一次触发
this.resize(true);
}, LazyLoad);
$$.extend( ImagesLazyLoad.prototype, {
//初始化程序
_initialize: function(options) {
LazyLoad.prototype._initialize.call(this, [], options);
//设置子类属性
var opt = this.options;
this.onLoad = opt.onLoad;
var attribute = this._attribute = opt.attribute;
//设置加载图片集合
var getSrc = opt.getSrc,
filter = $$F.bind( this._filter, this,
opt["class"],
getSrc ? function(img){ return getSrc(img); }
: function(img){ return img.getAttribute( attribute ) || img.src; },
opt.holder
);
this._elems = $$A.filter(
opt.images || this._container.getElementsByTagName("img"), filter
);
//判断属性是否已经加载的方法
this._hasAttribute = $$B.ie6 || $$B.ie7
? function(img){ return attribute in img; }
: function(img){ return img.hasAttribute( attribute ); };
},
//设置默认属性
_setOptions: function(options) {
return LazyLoad.prototype._setOptions.call(this, $$.extend({//默认值
images: undefined,//图片集合
attribute: "_lazysrc",//保存原图地址的自定义属性
holder: "",//占位图
"class": "",//筛选样式
getSrc: undefined,//获取原图地址程序
onLoad: function(){}//加载时执行
}, $$.extend( options, {
onLoadData: this._onLoadData
})));
},
//筛选整理图片对象
_filter: function(className, getSrc, holder, img) {
if ( className && (" " + img.className + " ").indexOf(" " + className + " ") == -1 ) return false;//排除样式不对应的
//获取原图地址
var src = getSrc(img);
if ( !src ) return false;//排除src不存在的
if ( src == img.src ) {
//排除已经加载或不能停止加载的
if ( img.complete || $$B.chrome || $$B.safari ) return false;
img.removeAttribute("src");//移除src
}
if ( holder ) { img.src = holder; }
//用自定义属性记录原图地址
img.setAttribute( this._attribute, src );
return true;
},
//显示图片
_onLoadData: function(img) {
var attribute = this._attribute;
if ( this._hasAttribute( img ) ) {
img.src = img.getAttribute( attribute );
img.removeAttribute( attribute );
this.onLoad( img );
}
}
});
</script>
</head>
<body>
<style>
.lazy{ width:600px;border:1px solid #ccc;}
.lazy table{border-collapse:collapse;}
.lazy td{border:1px solid #ccc;text-align:center;padding:20px;background:#FFF;}
#idLazyContainer img{width:140px;height:100px;background:url('http://www.cnblogs.com/images/cnblogs_com/cloudgamer/169629/o_loading.gif') no-repeat center; border:0;}
</style>
图片延迟加载：共有图片
<input id="idTotal" type="text" size="3" maxlength="2" value="50" />
张，未载入 <span id="idShow"></span> 张
<input id="idReset" type="button" value="重新开始" />
<input id="idAuto" type="button" value="自动播放" />
<input id="idPos" type="button" value="位置改变" />
<div class="lazy" id="idLazyContainer" style="position:relative">
<table cellspacing="0" cellpadding="0" id="idLazy">
<tr>
<td><a href="http://www.cnblogs.com/cloudgamer/archive/2009/12/22/ImagePreview.html"> <img _lazysrc="http://images.cnblogs.com/cnblogs_com/cloudgamer/143727/r_song1.jpg" alt="图片上传预览" /> </a></td>
</tr>
<tr>
<td><a href="http://www.cnblogs.com/cloudgamer/archive/2009/08/10/FixedMenu.html"> <img _lazysrc="http://images.cnblogs.com/cnblogs_com/cloudgamer/143727/r_song2.jpg" alt="多级联动菜单" /> </a></td>
</tr>
<tr>
<td><a href="http://www.cnblogs.com/cloudgamer/archive/2009/07/07/FixedTips.html"> <img _lazysrc="http://images.cnblogs.com/cnblogs_com/cloudgamer/143727/r_song3.jpg" alt="浮动定位提示" /> </a></td>
</tr>
<tr>
<td><a href="http://www.cnblogs.com/cloudgamer/archive/2010/02/01/LazyLoad.html"> <img _lazysrc="http://images.cnblogs.com/cnblogs_com/cloudgamer/143727/r_song4.jpg" alt="数据延迟加载" /> </a></td>
</tr>
<tr>
<td><a href="http://www.cnblogs.com/cloudgamer/archive/2009/12/01/Quick_Upload.html"> <img _lazysrc="http://images.cnblogs.com/cnblogs_com/cloudgamer/143727/r_song5.jpg" alt="简便文件上传" /> </a></td>
</tr>
</table>
</div>
<script>
var table = $$("idLazy"), msg = $$("idShow"), total = $$("idTotal"), cells = [];
for (var i = 0, n = table.rows.length; i < n; i++ ) {alert(table.rows[i].cells[0].innerHTML);cells.push(table.rows[i].cells[0].innerHTML)}
function Lazy(){
while(table.firstChild){ table.removeChild(table.firstChild); }
for (var i = 0, n = total.value | 0; i < n; i++ ) {//加上随机参数防止缓存影响效果
var tr = table.insertRow(i).insertCell();
tr.innerHTML=cells[0];
var img = table.getElementsByTagName("img")[0];
img.setAttribute("_lazysrc", img.getAttribute("_lazysrc") + "?" + Math.random());
cells.push(cells.shift());
}
msg.innerHTML = i;
var lazy = new ImagesLazyLoad({
container: window, mode: "vertical",
holder: "http://www.cnblogs.com/images/cnblogs_com/cloudgamer/169629/o_dot.gif",
onLoad: function(img) { msg.innerHTML = --i; }
});
$$("idReset").onclick = function(){ lazy.dispose(); Lazy(); }
$$("idPos").onclick = function(){
with($$("idLazyContainer").style){
if( width == "300px" ){ left = 0; width = "600px"; }else{ left = width = "300px"; }
}
lazy.resize(true);
}
}
Lazy();
total.onchange = Lazy;
</script>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 关于在页面加载完后使用js修改图片高度进行手机屏幕适配的问题
- 第一次自己写jquery图片延迟加载插件，不通用，但修改一下还是可以使用到很多页面上的
- [Android初级]关于使用universal-image-loader加载imagelist出现图片闪烁的问题
- 使用sdWebImage实现对tableView的cell加载图片淡入淡出效果
- 【转】Jquery修改image的src属性，图片不加载问题
- Android自带抽屉布局及NavigationView的使用（动态加载头部图片，修改user名称）
- FckEditor使用时遇到的两个问题，未能加载xxxx和上传图片无响应的解决方法
- jquery图片延迟加载方案解决图片太多加载缓慢问题
- IE兼容问题之一：table--td设置背景颜色or背景图片，border不能正常显示（用的框架是layui）
- jquery插件图片延迟加载问题
- Android使用BitmapFactory.Options解决加载大图片内存溢出问题
- 解决tmpl插件与图片自动轮播插件结合使用，无法加载mytv()方法问题
- Jquery图片延迟加载插件jquery.lazyload.js的使用方法
- 在使用img标签的src属性引用网络图片资源时加载图片失败的问题
- 使用Android-Universal-Image-Loader异步加载图片遇到的问题
- Android使用BitmapFactory.Options解决加载大图片内存溢出问题
- 前端性能优化之 —— 图片延迟加载（借鉴修改）
- 在ListView中使用ImageLoader加载图片时出现闪烁问题
- [转]使用jquery插件实现图片延迟加载技术
- iOS开发使用sdWebImage实现对tableView的cell加载图片淡入动画