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表格呈现 (阅读：46468)
- 分享一个JQUERY颜色选择插件 (阅读：12394)
- jQuery插件---轻量级的弹出窗口wBox. (阅读：9607)
- 10个强大的Ajax jQuery文件上传程序 (阅读：7682)
- jQuery的data()方法 (阅读：7444)
- jQuery性能优化指南 (阅读：7161)
- jQuery Color Animations颜色动画插件 (阅读：6931)
- 精于图片处理的10款jQuery插件 (阅读：6066)
- jQuery中getJSON跨域原理详解 (阅读：5549)
- 配合jquery实现异步加载页面元素 (阅读：5293)
扫一扫订阅我的微信号：IT技术博客大学习
- 作者：Sonhineboy 来源： web前端开发
- 标签： jquery 延时
- 发布时间：2012-08-07 13:36:08
-
[626] Go Reflect 性能 -
[24] 正态分布的前世今生(一)
-
[15] rsync同步的艺术
-
[13] Linux Used内存到底哪里去了？
-
[13] 什么是DNS劫持和DNS污染？
-
[13] Cuckoo Filter：设计与实现
-
[12] Mac下.apk的反编译
-
[12] 深入浅出选择类排序算法(简单选择排序,堆排序
-
[11] vim入门,进阶与折腾
-
[11] jQuery性能优化指南
