浅谈tudou土豆网首页图片延迟加载的效果


Posted in Javascript onJune 23, 2010

这样做的好处当然是如果有用户不需要查看下面的内容,则免去了下面所有图片的请求,这对减少服务器的压力还是很有帮助的。
实现:
其实tudou的实现原理很简单,
1.先把所有需要延迟加载的图片的src都设置成同1个小图片的连接(sprite.gif),把真真图片的连接放进图片的alt属性中,look下代码:

<a class="inner" target="new" title="史上最重街舞选手和最柔软街舞选手" href="http://www.tudou.com/programs/view/Utmt1_6Z-lU/"> 
<img width="120" height="90" class="pack_clipImg lazyImg" alt="http://i01.img.tudou.com/data/imgs/i/051/720/095/p.jpg" src="http://css.tudouui.com/skin/__g/img/sprite.gif" coords="_DAA"/> 
</a>

2. 绑定window.scroll事件,在该事件里面的重设所有class为lazyImg的图片的src值,在土豆首页找到如下JS:
var o=function(){ 
var s=TUI.pos.scrollTop(),q=c; 
if(q.box[0]){ 
var r=q.box.offset().top; 
if(r-s>0&&r-TUI.pos.windowHeight()<s){ 
q.init() 
}else{ 
q.stop() 
} 
} 
if(!h||s<590){return true} 
TUI.widget.quickPlaylist.load(); 
h=false 
}; 
o(); 
$(window).bind("scroll",o);

我没有去跟入查看TUI.widget.quickPlaylist.load()方法的实现,tudou的JS都是压缩混淆的,看起来挺累,不过大家知道原理就可以了。
实例:
上面说了那么多,最后还是来个实例比较实际点,毕竟眼见为实嘛。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script> 
</head> 
<body> 
能看的见到图片:<img src="http://at-img4.tdimg.com/board/2010/5/tylc-115X55.jpg"/> <div id="lazyBox" style="margin-top:100px;"> 
一开始看不到的图片: 
<img width="120" height="90" style="border:1px solid blue;" class="lazyImg" alt="http://i01.img.tudou.com/data/imgs/i/051/720/095/p.jpg" src="http://css.tudouui.com/skin/__g/img/sprite.gif" coords="_DAA"/> 
<img width="120" height="90" style="border:1px solid blue;" class="lazyImg" alt="http://i01.img.tudou.com/data/imgs/i/051/871/396/m20.jpg" src="http://css.tudouui.com/skin/__g/img/sprite.gif" coords="_DBA"/> 
</div> 
<div style="height:1000px;"> 
  
</div> 
<script type="text/javascript"> 
var hasShow = false; 
$(window).bind("scroll",function(){ 
if(hasShow==true){ 
$(window).unbind("scroll"); 
return; 
} 
var t = $(document).scrollTop(); 
if(t>50){ 
// 滚动高度超过50,加载图片 
hasShow = true; 
$("#lazyBox .lazyImg").each(function(){ 
$(this).attr("src",$(this).attr("alt")); 
}); 
} 
}); 
</script> 
</body> 
</html>

把上面代码copy到本地运行下就可以看到效果了。
Javascript 相关文章推荐
js 获取浏览器高度和宽度值(多浏览器)
Sep 02 Javascript
JQuery 遮罩层实现(mask)实现代码
Jan 09 Javascript
JavaScript中“基本类型”之争小结
Jan 03 Javascript
javascript实现可改变滚动方向的无缝滚动实例
Jun 17 Javascript
jQuery团购倒计时特效实现方法
May 07 Javascript
JS中mouseover和mouseout多次触发问题如何解决
Jun 06 Javascript
jQuery插件扩展extend的简单实现原理
Jun 24 Javascript
极力推荐10个短小实用的JavaScript代码段
Aug 03 Javascript
jQuery.uploadify文件上传组件实例讲解
Sep 23 Javascript
Javascript Function.prototype.bind详细分析
Dec 29 Javascript
Node.js通过身份证号验证年龄、出生日期与性别方法示例
Mar 09 Javascript
vue实现给div绑定keyup的enter事件
Jul 31 Javascript
有道JavaScript监听浏览器的问题
Jun 23 #Javascript
utf-8编码引起js输出中文乱码的解决办法
Jun 23 #Javascript
js和jquery批量绑定事件传参数一(新猪猪原创)
Jun 23 #Javascript
获取dom元素那些讨厌的位置封装代码
Jun 23 #Javascript
jquery ajax 同步异步的执行示例代码
Jun 23 #Javascript
jquery tab插件制作实现代码
Jun 22 #Javascript
jquery多浏览器捕捉回车事件代码
Jun 22 #Javascript
You might like
PHP4实际应用经验篇(1)
2006/10/09 PHP
用PHP读取flv文件的播放时间长度
2009/09/03 PHP
php下获取http状态的实现代码
2014/05/09 PHP
PHP中防止SQL注入方法详解
2014/12/25 PHP
PHP设计模式之简单投诉页面实例
2016/02/24 PHP
浅析php设计模式之数据对象映射模式
2016/03/03 PHP
PHP自定义函数获取URL中一级域名的方法
2016/08/23 PHP
php实现基于pdo的事务处理方法示例
2017/07/21 PHP
Laravel框架模板继承操作示例
2018/06/11 PHP
javascript时区函数介绍
2012/09/14 Javascript
js制作的鼠标悬浮时产生的下拉框效果
2012/10/27 Javascript
js计算字符串长度包含的中文是utf8格式
2013/10/15 Javascript
Node.js 服务器端应用开发框架 -- Hapi.js
2014/07/29 Javascript
深入理解JavaScript系列(34):设计模式之命令模式详解
2015/03/03 Javascript
简单纯js实现点击切换TAB标签实例
2015/08/23 Javascript
JavaScript 节流函数 Throttle 详解
2016/07/04 Javascript
DWR3 访问WEB元素的两种方法实例详解
2017/01/03 Javascript
Javascript实现找不同色块的游戏
2017/07/17 Javascript
vue下的@change事件的实现
2019/10/25 Javascript
如何使用vue slot创建一个模态框的实例代码
2020/05/24 Javascript
jQuery 添加元素和删除元素的方法
2020/07/15 jQuery
python教程之用py2exe将PY文件转成EXE文件
2014/06/12 Python
以Python的Pyspider为例剖析搜索引擎的网络爬虫实现方法
2015/03/30 Python
详细解析Python中__init__()方法的高级应用
2015/05/11 Python
python3 图片referer防盗链的实现方法
2018/03/12 Python
学生信息管理系统python版
2018/10/17 Python
python使用writerows写csv文件产生多余空行的处理方法
2019/08/01 Python
Pycharm连接远程服务器并实现远程调试的实现
2019/08/02 Python
让Django的BooleanField支持字符串形式的输入方式
2020/05/20 Python
Python调用jar包方法实现过程解析
2020/08/11 Python
简单几步用纯CSS3实现3D翻转效果
2019/01/17 HTML / CSS
巴西宠物店在线:Geração Pet
2017/05/31 全球购物
授权委托书(完整版)
2014/09/10 职场文书
事业单位考察材料范文
2014/12/25 职场文书
MySQL8.0.24版本Release Note的一些改进点
2021/04/22 MySQL
Redis高可用集群redis-cluster详解
2022/03/20 Redis