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延迟加载图片插件（未完成）”

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

    回复 ↓

发表回复

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

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