自从接触电脑开始,就迷恋了两部动漫,火影和死神,记得以前看的时候,要等图片完全加载完成才能看到,最近半年的时间,发现打开漫画的速度是越来越快了,加载的方式也发生了一些变化。
查了一下,才知道他们使用了一种新的加载技术——图片延迟加载技术,那么什么才是图片延迟加载技术(ImageLazyLoad)呢?
在页面上图片比较多的时候,打开一张页面必然引起与服务器大数据量的交互。尤其是对于高清晰的图片,占的几M的空间。ImageLazyLoad技术就是,当前可是界面的图片是加载进来的,而不可见页面(通过滚动条下拉可见)中的图片是不加载的,这样势必会引起速度上质的提升。
眼下网上使用此技术的网站有太多太多,如淘宝,还有一些动漫网站,他们都使用了这种技术。
眼下比较常用的图片延迟加载技术有四种:kissy(淘宝的JS框架),Jquery 图片延迟插件,Prototype,YUI 2。
抽时间去网上查查了,YUI的图片延迟技术是就成熟的,Jquery的图片延迟插件的设计灵感就来自于YUI的延迟技术(Lazyloader is inspired by YUI ImageLoader Utility by Matt Mlinac),闲话不说,一起来看看如何使用。
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。
分享到:
相关推荐
jq图片延迟加载
页面延迟加载源码下载,图片延迟加载源码下载,jquery页面延迟加载,页面延迟加载技术实现分析
页面图片延迟加载,用起来非常方便,里面有demo,自己看一下,非常简单
jquery 图片延迟加载插件制作tab选项卡图片异步加载
【京华志】jquery页面延迟加载技术实现源代码 QQ交流群60168829 欢迎C# ASP.NET 和SQL新手 老手 高手加入 谢谢
JQuery 图片延迟加载 lazyload
jquery.DataLazyLoad数据延迟加载插件
jquery——ajax__json,的一些文档,jquery——ajax__json,的一些文档,
jquery实现图片延迟加载过程.rar
jquery图片延迟加载花瓣网首页图片波浪条纹排列加载
JQUERY图片延迟加载,可以让你的首页一些不重要的图片延迟加载。
数据延迟加载功能的jQuery插件,类似新浪微博的滚动加载,当滚动条滚动到底部的时候,加载数据。使用方法: 加载jquery文件和DataLazyLoad文件。[removed][removed] [removed][removed] 根据选择器调用插件$("....
jquery经验总结——页面加载事件ready(fun)
jQuery图片延迟加载插件是一款基于jquery实现的轻量级图片延迟加载插件。由于图片太大,加载缓慢,本插件可以完美解决该问题,加载图片之前先显示loading图片,用户体验更好。本文档有实例,可以直接使用。
前端 , jQuery——固定导航栏 , 若窗口被卷上去的高度大于等于顶部top的高度时 让导航栏变成固定定位,定位到距离顶部为0的位置