Discuz!官方免费开源建站系统

 找回密码
 立即注册

QQ登录

只需一步,快速开始

搜索

[展示] 通过滚动条下拉的图片延迟加载-超级简单【过期】

[复制链接]
zhuzhi520 发表于 2012-4-7 10:22:48 | 显示全部楼层 |阅读模式
本帖最后由 zhuzhi520 于 2013-9-26 10:32 编辑

说在前面:
看了论坛里面很多人需要图片延迟加载,感觉这功能确实很不错
能加速站点的载入速度,而且加载很华丽。

代码只有几KB,轻巧方便。
这个特效是少有华丽加速的果,因为它能判断访客是不是在查看当前图片。


LazyLoad简介:
在页面上图片比较多的时候,打开一张页面必然引起与服务器大数据量的交互。尤其是对于高清晰的图片,占的几M的空间。ImageLazyLoad技术就是,当前可见界面的图片是加载进来的,而不可见页面(通过滚动条下拉可见)中的图片是不加载的,只是预加载一个很小的填充图片,等到访客滑动鼠标滑轮或浏览到图片位置时,真正的图片地址才会加载。这样势必会引起速度上质的提升。



LazyLoad使用方法:
1.后台---全局---SEO设置---其他头部信息
加入以下代码:
  1. <script type="text/javascript" src="static/js/jquery-1.4.2.min.js"></script>
  2. <script type="text/javascript" src="static/js/jquery.lazyload.js"></script>
  3. <script type="text/javascript">
  4. jQuery(document).ready(
  5. function($){
  6. $("img").lazyload({
  7. placeholder : "static/js/grey.gif",
  8. effect : "fadeIn"
  9. });
  10. });
  11. </script>
复制代码
2.更新缓存即可。



JS下载包 :

解压,将文件上传到论坛根目录即可。

效果预览:

http://bbs.860w.com

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有账号?立即注册

x

评分

1

查看全部评分

ynxpmmn 发表于 2012-4-8 12:45:15 | 显示全部楼层
门户的幻灯片也延迟了!怎么调整!
回复

使用道具 举报

liulshao 发表于 2012-4-8 12:53:35 | 显示全部楼层
厉害,等下去弄~
回复

使用道具 举报

 楼主| zhuzhi520 发表于 2012-4-12 18:46:34 | 显示全部楼层
ynxpmmn 发表于 2012-4-8 12:45
门户的幻灯片也延迟了!怎么调整!

我也是网络收集的  如果找到方法分享下代码
回复

使用道具 举报

矜持的小孩 发表于 2012-4-15 10:43:13 | 显示全部楼层
提示: 作者被禁止或删除 内容自动屏蔽
回复

使用道具 举报

麒麟圣手 发表于 2012-4-17 09:05:05 | 显示全部楼层
提示: 作者被禁止或删除 内容自动屏蔽
回复

使用道具 举报

二号 发表于 2012-4-17 09:11:53 | 显示全部楼层
提示: 作者被禁止或删除 内容自动屏蔽
回复

使用道具 举报

二号 发表于 2012-4-17 09:12:25 | 显示全部楼层
提示: 作者被禁止或删除 内容自动屏蔽
回复

使用道具 举报

路漫漫人烦烦 发表于 2012-4-18 11:06:36 | 显示全部楼层
提示: 作者被禁止或删除 内容自动屏蔽
回复

使用道具 举报

【许昌品牌空间_ 发表于 2012-4-19 14:17:10 | 显示全部楼层
第一张图片显示了,其他图片全不显示, 这个有问题
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

手机版|小黑屋|Discuz! 官方站 ( 皖ICP备16010102号 )star

GMT+8, 2024-11-16 00:32 , Processed in 0.032000 second(s), 7 queries , Gzip On, Redis On.

Powered by Discuz! X3.4

Copyright © 2001-2023, Tencent Cloud.

快速回复 返回顶部 返回列表