js控制图片延时加载
来源:互联网 发布:在端口23连接失败教程 编辑:程序博客网 时间:2024/05/18 03:09
注重网页显示速度的常用这个手段。意思就是滚动条没滚到的就先不加载。
整理了下网上资料,总结如下。
原理:
1.先不把img标签的src赋实际的图片路径
2.将图片路径保存在img的name属性中
3.js判断图片是否在可视窗口内,取出name的值,赋给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 (var 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><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><img name="http://bbs.525j.com.cn/upload/uploadfile/2005-9/200592922650386.jpg" src="hc.gif" /><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><img name="http://bbs.525j.com.cn/upload/uploadfile/2005-9/200592922650386.jpg" src="hc.gif" /><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><img name="http://bbs.525j.com.cn/upload/uploadfile/2005-9/200592922650386.jpg" src="hc.gif" /><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><img name="http://bbs.525j.com.cn/upload/uploadfile/2005-9/200592922650386.jpg" src="hc.gif" /><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><img name="http://bbs.525j.com.cn/upload/uploadfile/2005-9/200592922650386.jpg" src="hc.gif" /><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><img name="http://bbs.525j.com.cn/upload/uploadfile/2005-9/200592922650386.jpg" src="hc.gif" /><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><img name="http://bbs.525j.com.cn/upload/uploadfile/2005-9/200592922650386.jpg" src="hc.gif" /><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><img name="http://bbs.525j.com.cn/upload/uploadfile/2005-9/200592922650386.jpg" src="hc.gif" /><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><img name="http://bbs.525j.com.cn/upload/uploadfile/2005-9/200592922650386.jpg" src="hc.gif" /><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><img name="http://bbs.525j.com.cn/upload/uploadfile/2005-9/200592922650386.jpg" src="hc.gif" /><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><img name="http://bbs.525j.com.cn/upload/uploadfile/2005-9/200592922650386.jpg" src="hc.gif" /><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><img name="http://bbs.525j.com.cn/upload/uploadfile/2005-9/200592922650386.jpg" src="hc.gif" /><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><img name="http://bbs.525j.com.cn/upload/uploadfile/2005-9/200592922650386.jpg" src="hc.gif" /><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><img name="http://bbs.525j.com.cn/upload/uploadfile/2005-9/200592922650386.jpg" src="hc.gif" /><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/></body></html>
- js控制图片延时加载
- js 延时加载 内容 图片
- 图片延时加载
- iOS延时加载图片
- 网页图片延时加载
- 图片延时加载
- Jquery 延时加载图片
- 网站图片延时加载
- 图片延时加载
- 一段实现页面上的图片延时加载的js
- Echo.js纯JavaScript图片延时加载插件
- 原生态js实现图片延时加载方法
- js延时加载
- Android Textview 延时加载图片
- jquery实现图片延时加载
- jquery lazyload 图片延时加载
- 图片的javascript延时加载
- TableView中图片延时加载
- android image文件
- DXP的铺铜层间距修改,不影响各层布线
- 求两条链表有无交点和第一个交点
- 语言栏不见了 语言栏可切换,但还是不能输入汉字
- sql语句学习
- js控制图片延时加载
- HttpModule的认识
- 汇编指令大全
- eclipse 中创建maven web项目
- CentOS(VM环境下)自动安装问题
- 浅谈Java中的几种随机数
- Linux查看CPU个数
- css实现鼠标各种图形效果
- Linux中查看系统资源占用情况的命令