js图片延时加载(jquery特效)
前段时间朋友说让给做一个js延时加载图片人功能,原来也的网上见过这些,但是没有具体的研究。今天学习了下,发出来和大家一直分享。至于延时加载的好处我在这里就不说了,好多朋友都说可以减少服务器短时间的请求数量。
一、原理分析
1.可显示区域的的图片正常显示,不可显示的不去请求,
2.当滚动滚动条时,计算可显示的图片,把图片的src的真实路径写入。
二、代码
这里我用的是jquery来做的,当然大家如果明白了原理,用什么做都可以做出很不错的效果。
下面看代码
<!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=gb2312" />
<script src="http://blog.suiyidian.cn/texiao/jquery-1.3.1.js" type="text/javascript"></script>
<title>js图片延时加载特效</title>
<script type="text/javascript">
$(function(){
var d = new Array();
for (i = 0; i < $("img").length; i++) {
d[i] = $("img").eq(i).attr("name");
}
for (i = 0; i < $("img").length; i++) {
if ($("img").eq(i).offset().top > document.documentElement.clientHeight + $(window).scrollTop()) {
$("img").eq(i).attr("src", "hc.gif");
} else {
$("img").eq(i).attr("src", d[i]);
}
}
$(window).scroll(function() {
for (i = 0; i < $("img").length; i++) {
if ($("img").eq(i).offset().top > document.documentElement.clientHeight + $(window).scrollTop()) {
$("img").eq(i).attr("src", "hc.gif");
} else {
$("img").eq(i).attr("src", d[i]);
}
}
})
})
</script>
</head>
<body>
<img name="http://hj.bbs.nen.com.cn/attachments/10063010304e0ab3ca1c10b81c.jpg" src="hc.gif" />
<br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/>
这上面是代码,大家可以细细的研究一下,
建议继续学习:
- JQuery实现Excel表格呈现 (阅读:46514)
- 分享一个JQUERY颜色选择插件 (阅读:12629)
- jQuery插件---轻量级的弹出窗口wBox. (阅读:9681)
- 10个强大的Ajax jQuery文件上传程序 (阅读:7750)
- jQuery的data()方法 (阅读:7572)
- jQuery性能优化指南 (阅读:7302)
- jQuery Color Animations颜色动画插件 (阅读:7068)
- 精于图片处理的10款jQuery插件 (阅读:6203)
- jQuery中getJSON跨域原理详解 (阅读:5612)
- 配合jquery实现异步加载页面元素 (阅读:5367)
扫一扫订阅我的微信号:IT技术博客大学习
- 作者:Sonhineboy 来源: web前端开发
- 标签: jquery 延时
- 发布时间:2012-08-07 13:36:08
- [70] Go Reflect 性能
- [68] 如何拿下简短的域名
- [65] Oracle MTS模式下 进程地址与会话信
- [63] 图书馆的世界纪录
- [62] IOS安全–浅谈关于IOS加固的几种方法
- [61] 【社会化设计】自我(self)部分――欢迎区
- [59] android 开发入门
- [54] 视觉调整-设计师 vs. 逻辑
- [49] 界面设计速成
- [48] 读书笔记-壹百度:百度十年千倍的29条法则