jquery延迟加载图片插件(未完成)

应一位朋友的邀请,尝试着写下这个貌似很热门的插件。昨天晚上构思了一下实现方式,结果没想到今天有点忙 :c4 ,断断续续写了点,初步实现了个非常简单的功能。

先写下我的想法,因为以前看过这方面的源码,实现思路一般两种,一种是打Domready与onload的时间差,不过这在webkit内核下行不通;一种是事先就修改src并添加其他属性(例如html5的data-xxx),所有浏览器都可以实现,缺点是这样用起来太麻烦,而且禁止js的话图片就不显示了。各有各的弊端吧。我本来设想是使用jquery的live方法在dom加载时动态委派事件,结果,事件是委派成功了,怎么执行是个问题 :e7 ,有哪位同学了解这方面麻烦留个言,不胜感谢(别说使用setTimeout··· a:3 )。

只好依据老方法先写了个简单的实例,等于先实现个原理,明天在完善封装下,

这段javascript代码位于头部,测试jquery的live方法以及方便你了解延迟加载的原理:

1
2
3
4
5
6
7
8
9
$('img').live('click',function(){
	//jquery的动态委派事件方法,即使是后来添加的标签,也会自动添加事件,也可以添加自定义事件
	var s = $(window).scrollTop();
	var t = $(this).offset().top;
	var h = s + $(window).height();
	alert('当前屏幕距离滚动条顶部 '+s);
	alert('当前屏幕高度 '+h);
	alert('此img当前高度 '+t);
});

然后html代码:

1
2
3
4
5
6
7
8
9
10
11
<div style="width:256px;margin:0 auto;">
	<img src="http://i.min.us/ib2Z2M.png" width="256" height="256">
	<img src="http://i.min.us/ib2m1Q.png" width="256" height="256">
	<img src="http://i.min.us/ib2o9Y.png" width="256" height="256">
	<img src="http://i.min.us/ib6Bow.png" width="256" height="256">
	<img src="http://i.min.us/ib2uYw.png" width="256" height="256">
	<img src="http://i.min.us/ib6JKS.png" width="256" height="256">
	<img src="http://i.min.us/ib6LTa.png" width="256" height="256">
	<img src="http://i.min.us/ib2K7U.png" width="256" height="256">
	<img src="http://i.min.us/ib7ju0.png" width="256" height="256">
</div>

最后底部的javascript代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
var $imgs = $('img');//获取img对象
$imgs.each(function(){
	$(this).data('src',$(this).attr('src'))//存储原来的src
}).attr('src','s.gif').css('background','#fff url(\'load.gif\') no-repeat 50% 50%');
//修改src为1像素宽1像素高的透明gif图片,并设置背景为加载图片
function checkInWindow(){
	$imgs.each(function(){
		var $this=$(this)
		//循环获取img
		if($this.offset().top<($(window).scrollTop()+ $(window).height())){
		//如果图片top小于窗口高度与当前窗口相对滚动条顶部高度之和(这句话好复杂.慢慢来)
			var src = $this.data('src');//获取src
			$this.attr('src',src).load(function(){
				$this.css('background','none');
				//赋值src并当图片load完成后去除背景加载图片
			});
			$imgs=$imgs.not($this.removeData('src'));//已显示的释放内存并退出img对象
		}
	})
}
checkInWindow();//在文档加载完成后先执行一次
$(window).scroll(checkInWindow);//注册滚动条滚动事件

想要它支持第二种方法,很简单,修改第三行为:

1
$(this).data('src',$(this).attr('data-src')||$(this).attr('src'))//存储data-src或者src属性

现在进行封装,首先要实现不仅仅是dom下的所有图片,所以要有一个参数决定容器,然后是不能局限于滚动事件,要能实现jquery以及自定义事件,最后,要实现不仅仅是图片,甚至于是html代码。

未完成,有待调整,还有bug,当图片父对象有滚动条时就跳过了,周一再改吧,又写不完了 :b5

$.fn.lazyLoad=function(opt){
var options={
obj:'img', //延迟隐藏对象,默认是图片,也可以是表达式

8 条评论在 “jquery延迟加载图片插件(未完成)

  1. 谢谢楼主,虽然有些地方看不懂,但是还是受益匪浅,谢谢。不知楼主有没有适合新手的教程呢?谢谢

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据