Lazy Load 延迟加载图片的jQuery插件中文使用文档_jquery
什么是LazyLoad技术?
在页面上图片比较多的时候,打开一张页面必然引起与服务器大数据量的交互。尤其是对于高清晰的图片,占了几百K的空间。Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预加载的处理方式正好是相反的。
在包含很多大图片长页面中延迟加载图片可以加快页面加载速度. 浏览器将会在加载可见图片之后即进入就绪状态. 在某些情况下还可以帮助降低服务器负担,这样势必会引起速度上质的提升。
兼容:ie6/7/8, firefox 3.5.5, opera 10.10, safari 4.0.4, chrome 3.0其中safari和chrome部分功能不支持。
Lazy Load 灵感来自 Matt Mlinac 制作的 YUI ImageLoader 工具箱. 这是演示页面。
原文的链接在:https://www.360docs.net/doc/4618377742.html,/projects/lazyload
现在Lazy Load的版本已经是1.8.1
下载地址: https://www.360docs.net/doc/4618377742.html,/jiaoben/63757.html
实例下载:
下载声明:
1. 注:此代码仅供学习交流,请勿用于商业用途。
2. 注:此代码仅供学习交流,请勿用于商业用途。
文件信息:文件名: Lazy Load延迟加载图片实例
文件Hash:dd3e435124e377c2da33344d442f85d1
文件大小:1.1 MB
文件上传日期:2012 年 3 月 25 日
文件更新日期:2012 年 3 月 25 日
文件描述:在页面上图片比较多的时候,打开一张页面必然引起与服务器大数据量的交互。尤其是对于高清晰的图片,占了几百K的空间。Lazy Load 是一个用JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预加载的处理方式正好是相反的。
怎样使用? 下面进入正题.Lazy Load 依赖于 jQuery. 请将下列代码加入页面head 区域:
复制代码代码如下:
Lazy Load的使用方法十分简单,但新版做了一些调整,必须修改标签的属性。把标签中的 src 属性改为等待图片的URL, data-original 属性填上真正的图片URL.
如下:
复制代码代码如下:
建议:src中的等待图片,最好使用1像素的单色图片。
JS代码如下:
复制代码代码如下:
$("https://www.360docs.net/doc/4618377742.html,zy").lazyload();
这样就能实现Lazy Load的效果了. Demo
看完Demo后,是不是觉得没什么效果出现?这个问题会在后面提到.
其实,并非一定要使用它规定的 data-original 属性来存放图片URL.你也可以自己定制别的属性名,如下:
JS代码如下:
复制代码代码如下:
$("https://www.360docs.net/doc/4618377742.html,zy").lazyload({ data_attribute : "attr" });
只需设置 data_attribute 属性为对应的名称即可. (注意:html代码大小写不
敏感!所以 "data-" 后面只能跟小写字母或数字.)
对于不支持JavaScript的浏览器,应该有相应的降级处理.
可以使用
复制代码代码如下:
CSS样式设置:
复制代码代码如下:
.lazy {
display: none;
}
JS代码:
复制代码代码如下:
$("https://www.360docs.net/doc/4618377742.html,zy").show().lazyload();
设置图片加载的反应距离
Lazy Load插件默认的设置是:图片在浏览器窗口上出现,就会触发加载.但通过设置 threshold 属性的值,可以调整图片的预先加载位置/距离.
复制代码代码如下:
$("https://www.360docs.net/doc/4618377742.html,zy").lazyload({ threshold : 200 });
另外, threshold 可以为正数或者负数.正数是预先加载, 假设数值为200, 则图片距离出现到屏幕还有 200px 时,就开始加载.如果是负数,则相反.假设数值为-200时,则图片已经在窗口出现,并且距离浏览器视窗底部的距离为 200px 时,才开始加载.
PS:图片和屏幕的距离是根据图片的 top 位置计算.
注意:threshold的设置需要考虑网站的长度和图片的高度,如果数值过大则会导致无法加载的问题.建议数值设置不要超过相应图片高度的一半.
通过事件触发加载
可以通过jQuery定义的事件来触发加载,也可以使用自己定义的事件.
复制代码代码如下:
$("https://www.360docs.net/doc/4618377742.html,zy").lazyload({
event : "click"
});
实现动画效果
上面的Demo之所以会没有图片加载的效果,是因为Lazy Load默认的图片加载是通过 jQuery 的show()方法来显示,所以图片出现几乎是一瞬间.当然我们还可以实现其他效果.
复制代码代码如下:
$("https://www.360docs.net/doc/4618377742.html,zy").lazyload({
effect : "fadeIn"
});
另外还可以使用 slideDown() 方法,但效果不佳.
如果想要控制动画的速度,还可以修改 effectspeed 属性.
复制代码代码如下:
$("https://www.360docs.net/doc/4618377742.html,zy").lazyload({
effect : "fadeIn",
effectspeed : 1000
});
effectspeed 属性默认是空的,所以如果不设置它,动画的时间为400毫秒. Container容器属性
当要延迟加载的图片全摆在一个容器中.只需把 container 属性指向摆放 img 的容器的对象.
css代码:
复制代码代码如下:
#container {
height: 600px;
overflow: scroll;
}
js代码:
复制代码代码如下:
$("https://www.360docs.net/doc/4618377742.html,zy").lazyload({
container: $("#container")
});
废话不多说,直接看Demo ,不单竖着的可以, 横着也行Demo .
failure_limit的属性
Lazy Load 有一个循环查找 img 的机制.根据 HTML 文档的布局从上往下查找,当找到第一个并未显示/加载的 img 时,就会停止往下查找.(其实就是对$("https://www.360docs.net/doc/4618377742.html,zy") 这个对象(组)进行顺序查找)
那这个 failure_limit 的属性有什么用呢?
现在网站设计时,都会用到大量的定位样式,如: float 和 position , 这样在浏览器呈现的布局效果和 HTML 文档中的 DOM 顺序有很大差异.
这样就会存在一种情况,某 标签已出现在屏幕上,但它却无法显示!! 因为它在 HTML 文档中的实际位置排在了那些还没有显示的 标签后面, 这样会导致显示在屏幕上的这个 标签无法加载相应的图片.当Lazy Load 在找到第一个未显示的 标签时,查找已经被终止了, 并没有继续往下遍历.
所以这个时候,就可以使用failure_limit属性.
复制代码代码如下:
$("https://www.360docs.net/doc/4618377742.html,zy").lazyload({
failure_limit : 10
});
这样 Lazy Load 会查找到第10个未显示的标签处.当在图片多且布局复杂的页面时, failure_limit 的作用就很大了.
原文还温馨提示:If you have a funky layout set this number to something high. 如果你的网站布局很"变态",建议把该值调得更高.
延迟下载图片
可以通过自定义事件,然后通过 setTimeout 来设置延迟触发该事件.
复制代码代码如下:
$(function() {
$("img:below-the-fold").lazyload({
event : "sporty"
});
});
$(window).bind("load", function() {
var timeout = setTimeout(function() {$("https://www.360docs.net/doc/4618377742.html,zy").trigger("sporty")},5000);
});
主要原理是,当 event 被设置为 scroll 以外的事件时, 实际上都会绑定了一个内置的 "appear" 事件.顾名思义, 这个事件就是用来显示图片的. (其实scroll 也是调用这个事件)
skip_invisible 加载不可见的图片
Lazy Load 插件默认对隐藏的图片不加载(例如 display:none ). 这样做有助于性能的优化.如果希望连隐藏的图片一起加载,则可以把 skip_invisible 设为false .
复制代码代码如下:
$("https://www.360docs.net/doc/4618377742.html,zy").lazyload({ skip_invisible : false });
jQuery打印插件PrintArea实现jQuery打印插件PrintArea实现
实现javascript打印功能,打印整个页面就很简单,但如果指定打印某一个区域就有点难点,这里有一个jQuery插件PrintArea可实现打印页面某区域功能。 使用说明 需要使用jQuery库文件和PrintArea库文件 使用方法 一,包含文件部分 1. 2. 二,html部分 1.
2.jQuery插件库
https://www.360docs.net/doc/4618377742.html, web前端培训教程:jQuery插件库 插件(Plugin)也成为jQuery 扩展(Extension),是一种遵循一定规范的应用程序接口编写出来的程序。目前jQuery 插件已超过几千种,由来自世界各地的开发者共同编写、验证和完善。而对于jQuery 开发者而言,直接使用这些插件将快速稳定架构系统,节约项目成本。 一.插件概述 插件是以jQuery 的核心代码为基础,编写出复合一定规范的应用程序。也就是说,插件也是jQuery 代码,通过js 文件引入的方式植入即可。 插件的种类很多,主要大致可以分为:UI 类、表单及验证类、输入类、特效类、Ajax 类、滑动类、图形图像类、导航类、综合工具类、动画类等等。 引入插件是需要一定步骤的,基本如下: 1.必须先引入jquery.js 文件,而且在所有插件之前引入; 2.引入插件;
https://www.360docs.net/doc/4618377742.html, 3.引入插件的周边,比如皮肤、中文包等。 二.验证插件 Validate.js 是jQuery 比较优秀的表单验证插件之一。这个插件有两个js 文件,一个是主文件,一个是中文包文件。使用的时候,可以使用min 版本;在这里,为了教学,我们未压缩版本。 验证插件包含的两个文件分别为:jquery.validate.js 和 jquery.validate.messages_zh.js。 //HTML 内容
//jQuery 代码 $(function () {jQuery 插件开发详解
JavaScript jQuery 插件开发 jQuery 插件开发其实很简单 jQuery已经被广泛使用,凭借其简洁的API,对DOM强大的操控性,易扩展性越来越受到web开发人员的喜爱,我在社区也发布了很多的jQuery插件 经常有人询问一些技巧,因此干脆写这么一篇文章给各位jQuery爱好者,算是抛砖引玉吧。 【基础】 a)样式 很多人会认为样式是个很复杂的东西,需要沉着冷静的心态加上非凡的审美观才能设计出赏心悦目的UI,抛开图片设计不说,其实css也就是那么些属性:position,margin,paddi ng,width,height,left,top,float,border,background... UI设计的漂亮与否在很大程度上依赖于设计人员对配色的把握和整体效果的协调。举个简单的例子,一个简单的页面,马虎的人: 复制代码代码如下:
细心的人: 复制代码代码如下:
JQUERY插件JQGRID常用属性说明
希望这个帮助文档能对jQuery插件的学习有所帮助 jqGrid包说明: jquery.js is the jQuery library, jquery.jqGrid.js主单元,包含的功能取决您的选择 grid.basic.js主插件其他插件包依赖于该插件正常运行 grid.custom.js Grid高级插件功能包 grid.formedit.js用于表格编辑、增加、删除功能 grid.inlinedit.js线条编辑 grid.subgrid.js一个处理表格的插件 grid.postext.js一个可以用来操作post数据的包 jqModal.js模态对话框的编辑 jqDnR.js可拖拉的表格编辑 themes包含gird需要的样式表 一、功能描述: jqGrid包主要用于将需要展示的数据动态的展示在页面的上,即动态画出表格,并封装了增、删、改、查、分类显示、在线编辑修改等功能。 二、关键使用说明: 1、导入jqGrid包,在首页属性里面添加如下包的信息 注:由于加载js包会耗费大量资源,建议动态加载这些js包,优化页面初始化效率。 2、在页面上需要添加表格的地方,增加