图片延迟加载插件jquery.lazyload.js的使用方法
最新版的jquery.lazyload.js已不再是伪的延迟加载了
一、请按照基本使用方法说明设置
//载入JavaScript 文件
<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.lazyload.js" type="text/javascript"></script>
//img标签至少应包含以下4个属性,否则不能实现延迟加载的效果,如下:
<img class="lazy" data-original="img/example.jpg" width="640" height="480">
//使用
$(function() {
$("img.lazy").lazyload();
});
二、常用属性说明
threshold : 200 //设置灵敏度,表示进入显示区域还有200像素就开始加载
effect : "fadeIn" //使用淡入特效
failure_limit : 10 //容差范围,一定要设置此值,原因说明请参考原文档 container: $("#container") //使用父容器,父容器的CSS样式至少应包含"height: 600px;overflow: scroll;"两个属性 event : "click" //修改触发事件为单击
三、参考
英文参考:http://www.appelsiini.net/projects/lazyload
中文参考:http://code.ciaoca.com/jquery/lazyload/
图片延迟加载插件jquery.lazyload.js的使用方法的更多相关文章
- jQuery图片延迟加载插件jquery.lazyload.js
在实际的项目开发中,我们通常会遇见这样的场景:一个页面有很多图片,而首屏出现的图片大概就一两张,那么我们还要一次性把所有图片都加载出来吗?显然这是愚蠢的,不仅影响页面渲染速度,还浪费带宽.这也就是们通 ...
- jQuery图片延迟加载插件jQuery.lazyload
插件描述:jQuery图片延迟加载插件jQuery.lazyload,使用延迟加载在可提高网页下载速度.在某些情况下,它也能帮助减轻服务器负载. 使用方法 引用jquery和jquery.lazy ...
- jQuery图片延迟加载插件jQuery.lazyload使用方法(转)
使用方法 1.引用jquery和jquery.lazyload.js到你的页面 <script src="jquery-1.11.0.min.js"></scri ...
- jQuery图片延迟加载插件jQuery.lazyload 的使用
使用方法 引用jquery和jquery.lazyload.js到你的页面 1 2 <script src="jquery-1.11.0.min.js"></sc ...
- jQuery图片懒加载插件jquery.lazyload.js使用实例注意事项说明
jQuery图片懒加载插件jquery.lazyload.js使用实例注意事项说明 jquery.lazyload.js是一个用JavaScript编写的jQuery插件.它可以延迟加载长页面中的图片 ...
- jQuery懒加载插件jquery.lazyload.js使用说明实例
jQuery懒加载插件jquery.lazyload.js使用说明实例很多网站都会用到‘图片懒加载’这种方式对网站进行优化,即延迟加载图片或符合某些条件才开始加载图片.懒加载原理:浏览器会自动对页面中 ...
- jQuery延迟加载(懒加载)插件 – jquery.lazyload.js
引入:<script type="text/javascript" src="${base}/resources/shop/js/jquery.lazyload.j ...
- 懒加载插件- jquery.lazyload.js
Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预 ...
- jQuery懒加载插件 – jquery.lazyload.js简单调用
Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预 ...
随机推荐
- How to Validate XML using Java
Configure Java APIs (SAX, DOM, dom4j, XOM) using JAXP 1.3 to validate XML Documents with DTD and Sch ...
- JSP_DAO方式实现数据库查询(MyEclipse10,Tomcat7.0,JDK1.7,)——Java Web练习(四)
1.项目结构: 2.创建数据库.表.插入记录 create database TestDao; use TestDao; create table student( stuid int, userna ...
- jQuery之事件even
jQuery之事件 W3C:http://www.w3school.com.cn/jquery/jquery_ref_events.asp 一.事件列表 1.blur() 当失去焦点时触发 ...
- 如何屏蔽Button setClickable与setEnabled
今天想让按键暂时无效,满足一定条件下才可以被用户按到.最初以为是setClickable,谁知搞错了.请看手册: 复制代码代码如下: public void setClickable (boolean ...
- MyEclipse10.0安装jad反编译插件
1.下载反编译工具jad(下面提供下载) 将下载下来的jadstar158.zip解压缩,将jad.exe文件放入jdk安装目录下 如:C:\Program Files\Java\jdk1.6.0_2 ...
- 【转】Enable ARC in a Cocos2D Project: The Step-by-Step-How-To-Guide Woof-Woof!
On April 5, 2012, in idevblogaday, by Steffen Itterheim http://www.learn-cocos2d.com/2012/04/enablin ...
- How to manage and balance “Huge Data Load” for Big Kafka Clusters---reference
1. Add Partition Tool Partitions act as unit of parallelism. Messages of a single topic are distribu ...
- PHP5常量
用函数 define()设置常量 define函数有3个参数 1.必选,常量的名称,标识符 2.必选,常量的值 3.可选,默认不设置,常量名称大小写敏感.如果设置true,常量名称不区分大小写! 下面 ...
- linux下安装memcached过程
前一次已经安装过memcached,没有做记录,太久没有操作了也没有记录有点生疏,做一下笔记,已背后用. 下载文件 下载memcached服务端, ...
- 上传jar包到nexus私服
摘要 通过网页和maven两种方式,上传本地的jar到nexus私服,以及引用jar时,自动引用依赖 1通过网页上传 这种方法只是上传了jar包.通过maven引用当前jar,不能取得jar的依赖 ...