浅谈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 相关文章推荐
JSON 客户端和服务器端的格式转换
Aug 27 Javascript
JS 文件大小判断的实现代码
Apr 07 Javascript
Javascript中typeof 用法小结
May 12 Javascript
简单的JS控制button颜色随点击更改的实现方法
Apr 17 Javascript
Node.js 的模块知识汇总
Aug 16 Javascript
node vue项目开发之前后端分离实战记录
Dec 13 Javascript
浅析JavaScript中的特殊数据类型
Dec 15 Javascript
javascript中一些奇葩的日期换算方法总结
Nov 14 Javascript
在vue-cli 3中给stylus、sass样式传入共享的全局变量
Aug 12 Javascript
解决jquery validate 验证不通过后验证正确的信息仍残留在label上的方法
Aug 27 jQuery
Vue 数组和对象更新,但是页面没有刷新的解决方式
Nov 09 Javascript
JavaScript实现鼠标经过表格某行时此行变色
Nov 20 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
使用PHPMYADMIN操作mysql数据库添加新用户和数据库的方法
2010/04/02 PHP
创建数据库php代码 用PHP写出自己的BLOG系统
2010/04/12 PHP
php替换字符串中间字符为省略号的方法
2015/05/04 PHP
php使用substr()和strpos()联合查找字符串中某一特定字符的方法
2015/05/12 PHP
php经典趣味算法实例代码
2020/01/21 PHP
整理Javascript基础入门学习笔记
2015/11/29 Javascript
JavaScript操作select元素和option的实例代码
2016/01/29 Javascript
Angular.js如何从PHP读取后台数据
2016/03/24 Javascript
基于javascript实现最简单的选项卡切换效果
2016/05/16 Javascript
jquery解析XML及获取XML节点名称的实现代码
2016/05/18 Javascript
jQuery基础_入门必看知识点
2016/07/04 Javascript
js两种拼接字符串的简单方法(必看)
2016/09/02 Javascript
Vue实现自带的过滤器实例
2017/03/09 Javascript
bootstrap日期控件问题(双日期、清空等问题解决)
2017/04/19 Javascript
使用Electron构建React+Webpack桌面应用的方法
2017/12/15 Javascript
angularJs-$http实现百度搜索时的动态下拉框示例
2018/02/27 Javascript
vue-router中的hash和history两种模式的区别
2018/07/17 Javascript
浅析vue-router jquery和params传参(接收参数)$router $route的区别
2018/08/03 jQuery
ES6知识点整理之函数对象参数默认值及其解构应用示例
2019/04/17 Javascript
使用 Vue cli 3.0 构建自定义组件库的方法
2019/04/30 Javascript
微信小程序蓝牙连接小票打印机实例代码详解
2019/06/03 Javascript
JS防抖和节流实例解析
2019/09/24 Javascript
详解vue中多个有顺序要求的异步操作处理
2019/10/29 Javascript
JS几个常用的函数和对象定义与用法示例
2020/01/15 Javascript
微信小程序实现登录注册功能
2020/12/29 Javascript
[03:37]2014DOTA2国际邀请赛 主赛事第一日胜者组TOPPLAY
2014/07/19 DOTA
解析Python中的二进制位运算符
2015/05/13 Python
Python有序字典简单实现方法示例
2017/09/28 Python
Python中装饰器高级用法详解
2017/12/25 Python
Python中.join()和os.path.join()两个函数的用法详解
2018/06/11 Python
python编写softmax函数、交叉熵函数实例
2020/06/11 Python
UGG澳洲官网:UGG Australia
2018/04/26 全球购物
如果Session Bean得Remove方法一直都不被调用会怎么样
2012/07/14 面试题
村容村貌整治方案
2014/05/21 职场文书
2014年销售工作总结
2014/12/01 职场文书
初二数学教学反思
2016/02/17 职场文书