怎么实现ImageLazyLoad
来源:互联网 发布:西门子组态软件 编辑:程序博客网 时间:2024/06/02 13:41
什么是ImageLazyLoad技术
在页面上图片比较多的时候,打开一张页面必然引起与服务器大数据量的交互。尤其是对于高清晰的图片,占的几M的空间。ImageLazyLoad技术就是,当前可见界面的图片是加载进来的,而不可见页面(通过滚动条下拉可见)中的图片是不加载的,这样势必会引起速度上质的提升。
怎么实现ImageLazyLoad
一、使用JQuery插件 ,插件名: jquery.lazyload(7kb大小),压缩后(3kb大小)
在线压缩js http://closure-compiler.appspot.com/home
虽然是很牛X的特效,不过用JQuery插件只需要短短几句代码,使用过程如下:
1.导入JS插件
<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.lazyload.js" type="text/javascript"></script>
2.在你的页面中加入如下的javascript:
$("img").lazyload();
这将会使所有的图片都延迟加载。
当然插件还有几个配置项可供设置。
1.改变threshold
$(“img”).lazyload({ threshold : 200 });
把阀值设置成200 意思就是当图片没有看到之前先load 200像素。
2.当然了你也可以通过设置占位符图片和自定事件来触发加载图片事件
$("img").lazyload({
placeholder : "img/grey.gif",
event : "click"
});
3.可以通过定义effect 参数来定义一些图片显示效果
$("img").lazyload({
placeholder : "img/grey.gif",
effect : "fadeIn"
});
LazyLoad(延迟加载)技术不仅仅用在对网页中图片的延迟加载,对数据同样可以,Google Reader和Bing图片搜索就把
LazyLoad技术运用的淋漓尽致;
缺陷:
1.与Ajax技术的冲突;
2.图片的延迟加载,遇到高度特别高的图片,会出现停止加载的问题;
3.写代码不规范的同学要注意了,不管由于什么原因,如果您的页面中,img标签的height属性未定义,那么我建议您最好不要使用ImageLazyLoad
大家可以直接采用淘宝的延迟加载技术:(2kb大小)
http://a.tbcdn.cn/kissy/1.0.0/build/imglazyload/imglazyload-min.js
调用方法也是很简单的:
<script src="http://a.tbcdn.cn/kissy/1.0.0/build/imglazyload/imglazyload-min.js"
type="text/javascript"></script> <script type="text/javascript">// <![CDATA[KISSY.ImageLazyload();// ]]></script>
注:该脚本依赖 yahoo-dom-event, 页面中需要加载 yui 2.x,你也可以直接引用下面的地址:
<script src="http://kissy.googlecode.com/svn/trunk/third-party/yui2/yahoo-dom-event/yahoo-dom-event.js" type="text/javascript"></script>
配置参数如下:
<script type="text/javascript">
KISSY.ImageLazyload({
mod: "manual", // 延迟模式。默认为 auto
diff: 200 // 当前屏幕下多远处的图片开始延迟加载。默认两屏外的图片才延迟加载
});
</script>
manual 模式时,需要手动将页面中需要延迟加载的图片的 src 属性名更改为 data-lazyload-src. 比如 SRP 页面,宝贝列表的后20个图片延迟加载。 输出时,html 代码为:
<img data-lazy-src="path/to/img" alt="something" />
如果您是Jquery,Prototype等这些JS框架的粉丝,他们都有定制的LazyLoad Plugin提供;
可查看http://www.appelsiini.net/projects/lazyload
LazyLoad(延迟加载)技术不仅仅用在对网页中图片的延迟加载,对数据同样可以,Google Reader和Bing图片搜索就把
LazyLoad技术运用的淋漓尽致;
首页图片延迟加载效果,大大提高网站打开速度,提升用户体验,对于首页图片多的电影站不二之选。可到娘娘v5电影网www.nnv5.com看效果,要是不会用的加群:110157459
1、将文件解压,将Js文件夹所有文件上传至网站根目录,目录形式为:
http://www.nnv5.com/Js/lazyload/grey.gif
http://www.nnv5.com/Js/lazyload/jquery.js
http://www.nnv5.com/Js/lazyload/jquery.lazyload.js
在需要用到特效的页面上,加上以下代码
<script type="text/javascript" src="/Js/lazyload/jquery.js"></script>
<script type="text/javascript" src="/Js/lazyload/jquery.lazyload.js"></script>
3、如果上传路径改变,或者加载时图片打叉,说明图片路径不正确,查找jquery.lazyload.js中的placeholder:,将后面的图片地址换成绝对地址即可!
下载地址:http://pan.baidu.com/s/1ntA0u85
- 怎么实现ImageLazyLoad
- ImageLazyLoad JQ说明
- 关于图片延迟加载技术-ImageLazyLoad
- 关于图片延迟加载技术-ImageLazyLoad
- JavaScript——图片延迟加载技术(ImageLazyLoad)
- struts分页怎么实现
- 服务器集群怎么实现?
- 怎么实现定时开关机
- 怎么实现https协议?
- 怎么实现????????什么思路!
- CListCtrl 怎么实现tooltip
- java怎么实现分页
- C# 怎么实现 closeHandle
- oracle怎么实现分页
- RAID怎么实现
- oracle怎么实现分页
- 怎么实现Web聊天
- 怎么实现高收益
- 如何让apache支持asp
- 从IIS的ASP迁移到APACHE的PHP的方法 网站设计 目前在网站服务器软件市场中,开放源码
- dedecms安装常规设置
- Codeforces 645F Cowslip Collections (莫比乌斯反演)
- PHP 远程文件管理,可以给表格排序,遍历目录,时间排序 点击表格第一行,头部就可以排序了,这个列子是当前目录的
- 怎么实现ImageLazyLoad
- Linux并发(异步信号)
- Linux环境利用tcpdump对网络数据进行抓包
- jquery中的$(function(){...})什么时候执行
- dedecms添加新变量提示 Request var not allow
- dede5.7织梦后台广告插件增加图片上传功能
- dede会员邮件验证设置详细图文教程
- RecyclerView的拖动和滑动 第二部分 :拖块,Grid以及自定义动画
- 汉字转拼音