【下载】jquery lazyload图片延迟加载文件下载方法

程序猿 JS jquery lazyload 延迟加载... (shuke.2013-08-13 05:14)

图片延迟加载一
在浏览有些网站时,发现图片是在下拉滚动条时才加载,这是一个很不错的用户体验。
这一效果是通过JavaScript 编写的 jQuery 插件实现的,它可以延迟加载长页面中的图片
使用方法：这个文件包含了JQ与LAZY，所以不用加载JQ了

<script type="text/javascript" src="Js/lazyload/jquery.lazyload.js"></script>

2 楼 shuke[2013-08-14 10:22]

延迟加载图片2.
这种方法，适合自己去写模板的人用，因为用其它人的模板的人会很难去一个个改掉SRC。

<script src="picload.js" type="text/javascript"></script>
<img src="grey.gif" original="http://img.xptheme.com.cn/allimg/100502/1216-100502015H2.jpg" />
<img src="grey.gif" original="http://pic.desk.chinaz.com/file/10.03.10/7/fengjhs45.jpg" />
<img src="grey.gif" original="http://pic.yesky.com/imagelist/07/09/2207222_3616.jpg" />
<img src="grey.gif" original="http://pic3.bbzhi.com/fengjingbizhi/chaokufengjing/show_fengjingta_280227_9.jpg" />
<img src="grey.gif" original="http://d.3987.com/ZMJP_0702/002.jpg" />
<img src="grey.gif" original="http://www.33bizhi.com/pic/cuntu/2011-2/14/1221094425364f2ao286yxo.jpg" />
<img src="grey.gif" original="http://img6.3lian.com/c23/desk3/22/17/21.jpg" />
<img src="grey.gif" original="http://img.xptheme.com.cn/allimg/101005/1216-101005100014.jpg" />
<img src="grey.gif" original="http://image.tianjimedia.com/uploadImages/2012/304/M1JGQ61PGG07.jpg" />
<img src="grey.gif" original="http://pica.nipic.com/2008-03-13/200831392252983_2.jpg" />
<img src="grey.gif" original="http://www.6to23.com/uploadfile/pic/uploadpics/200706/20070620172752_94.jpg" />
<img src="grey.gif" original="http://pic.yesky.com/imagelist/07/31/4300217_4037.jpg" />
<img src="grey.gif" original="http://image.tianjimedia.com/uploadImages/2012/340/YQ19QQ8687TP.jpg" />
<img src="grey.gif" original="http://www.bzbuluo.cn/view/bizhi/201192111052500.jpg" />
<img src="grey.gif" original="http://image.tianjimedia.com/uploadImages/2012/270/V0LD86SU5M4L.jpg" />
<img src="grey.gif" original="http://img.download.pchome.net/30/4i/94896_800x600.jpg" />
<img src="grey.gif" original="http://pic3.bbzhi.com/fengjingbizhi/chaokufengjing/show_fengjingta_280197_9.jpg" />
<img src="grey.gif" original="http://www.bz55.com/uploads/allimg/110610/1T523JL-0.jpg" />
<img src="grey.gif" original="http://img.bzdao.com/2013/4273034.jpg" />
<img src="grey.gif" original="http://www.52desktop.cn/upimg/allimg/090419/124015505A01223E8.jpg" />
<img src="grey.gif" original="http://jpp2.imghb.com/pic/pic/91/97/81/1428300891978179_a602x602.gif" />
<img src="grey.gif" original="http://img165.ph.126.net/0mbkwGOXblalw4XhRiLI9A==/1498291301032128228.jpg" />
<img src="grey.gif" original="http://img533.ph.126.net/KKkoVedFQYvYZxR5oFFtHA==/1277896394267408060.gif" />
<img src="grey.gif" original="http://img.ph.126.net/TGO2VUJSTk526bUL5hpqjg==/2552133613852442073.gif" />
<img src="grey.gif" original="http://img.blog.163.com/photo/aIgDB8Ct_mhpgjHZ0XeNaw==/2543407889557944595.jpg" />

3 楼 shuke[2013-08-14 10:40]

第三种方法
管理员更改后的最优品

1、将文件解压，将Js文件夹所有文件上传至网站根目录，目录形式为：
http://www.coolneng.com/Js/grey.gif
http://www.coolneng.com/Js/lazyload/jquery.lazyload.js

2、调用方法：
在需要用到特效的页面上，加上以下代码
<script type="text/javascript" src="/Js/jquery.lazyload.js"></script>

3、如果上传路径改变，或者加载时图片打叉，说明图片路径不正确，查找jquery.lazyload.js中的placeholder:，将后面的图片地址换成绝对地址即可！

如有问题，请登录 http://www.coolneng.com 留言！

4 楼 shuke[2013-08-15 11:24]

现在给大家第四种方法：

<script LANGUAGE="JavaScript" src="LazyLoad.js"></script>
<style type="text/css">  
#idLazyContainer{ overflow-y:hidden; position:relative;}
#idLazyContainer img{ background:url('http://www.cnblogs.com/images/cnblogs_com/cloudgamer/169629/o_loading.gif') no-repeat center; border:0;}
</style>
 </HEAD>
 <BODY><div style=" width:980px; overflow:hidden;text-align:center" id="idLazyContainer">
<img  src="http://img.xptheme.com.cn/allimg/100502/1216-100502015H2.jpg" /><br>
<img  src="http://pic.desk.chinaz.com/file/10.03.10/7/fengjhs45.jpg" /><br>
<img  src="http://pic.yesky.com/imagelist/07/09/2207222_3616.jpg" /><br>
<img  src="http://pic3.bbzhi.com/fengjingbizhi/chaokufengjing/show_fengjingta_280227_9.jpg" /><br>
<img  src="http://d.3987.com/ZMJP_0702/002.jpg" /><br>
<img  src="http://www.33bizhi.com/pic/cuntu/2011-2/14/1221094425364f2ao286yxo.jpg" /><br>
<img  src="http://img6.3lian.com/c23/desk3/22/17/21.jpg" /><br>
<img  src="http://img.xptheme.com.cn/allimg/101005/1216-101005100014.jpg" /><br>
<img  src="http://image.tianjimedia.com/uploadImages/2012/304/M1JGQ61PGG07.jpg" /><br>
<img  src="http://pica.nipic.com/2008-03-13/200831392252983_2.jpg" /><br>
<img  src="http://www.6to23.com/uploadfile/pic/uploadpics/200706/20070620172752_94.jpg" /><br>
<img  src="http://pic.yesky.com/imagelist/07/31/4300217_4037.jpg" /><br>
<img  src="http://image.tianjimedia.com/uploadImages/2012/340/YQ19QQ8687TP.jpg" /><br>
<img  src="http://www.bzbuluo.cn/view/bizhi/201192111052500.jpg" /><br>
<img  src="http://image.tianjimedia.com/uploadImages/2012/270/V0LD86SU5M4L.jpg" /><br>
<img  src="http://img.download.pchome.net/30/4i/94896_800x600.jpg" /><br>
<img  src="http://pic3.bbzhi.com/fengjingbizhi/chaokufengjing/show_fengjingta_280197_9.jpg" /><br>
<img  src="http://www.bz55.com/uploads/allimg/110610/1T523JL-0.jpg" /><br>
<img  src="http://img.bzdao.com/2013/4273034.jpg" /><br>
<img  src="http://www.52desktop.cn/upimg/allimg/090419/124015505A01223E8.jpg" /><br>
<img  src="http://jpp2.imghb.com/pic/pic/91/97/81/1428300891978179_a602x602.gif" /><br>
<img  src="http://img165.ph.126.net/0mbkwGOXblalw4XhRiLI9A==/1498291301032128228.jpg" /><br>
<img  src="http://img533.ph.126.net/KKkoVedFQYvYZxR5oFFtHA==/1277896394267408060.gif" /><br>
<img  src="http://img.ph.126.net/TGO2VUJSTk526bUL5hpqjg==/2552133613852442073.gif" /><br>
<img  src="http://img.blog.163.com/photo/aIgDB8Ct_mhpgjHZ0XeNaw==/2543407889557944595.jpg" /><br>
</div>

进度：100% 返回程序猿

解决织梦图集中上传图片时跳出302错误

JS与CSS返回顶部的应用

图片新热点

网站自定字体，压缩字库让网页字体与图标 *.EOT是一种压缩字库，目的是解决在网页中嵌入特殊字体的难题。例如：网页前端开发人员在网页中使用... 查看详情
酷能微日志V1.1发布 酷能微日志V1.1发布一，PHP文件，无需数据库(日志生成TXT文件保存在DATA里)。3个文件搞... 查看详情
PHPCMS调用自动广告的问题 可以专门建立一个或者几个栏目，用于放置不同的广告。在后台建立栏目时，可以先填写广告栏目的ID，在加... 查看详情
js 图片带点幻灯播放效果，适合做BA 这个效果很适合BANNER，可以加连接，也可以做幻灯片。有图有真相：... 查看详情
【原创】phpcmsv9 关于站群同布 1.首先，建立一个发步点，填写FTP相关地址，为的是能够发步到你网站空间里。这样子你的网站就不要后... 查看详情

【下载】jquery lazyload图片延迟加载文件下载方法

图片新热点

导航

目录