图片延迟加载插件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 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预 ...
随机推荐
- 8-7-Exercise
链接:第二次小练 这次是我们这组出的题目~我出了一道......B-Prison rearrangement,感觉有点复杂~不过其实题目想通了还是很简单的...... @荆红浅醉出的是A.C.D,@从 ...
- 几个shell自动化脚本(定期清理、磁盘空间、搜寻关键字)
发布时间:2014-10-28 09:52:17 编辑:AHLinux.com 分享几个精致耐用的shell脚本,分别用于定期清理暂存文件.检查硬盘空间使用率.搜寻所有记录文件的关键字符串.有需要 ...
- Kerberos认证流程详解
Kerberos是诞生于上个世纪90年代的计算机认证协议,被广泛应用于各大操作系统和Hadoop生态系统中.了解Kerberos认证的流程将有助于解决Hadoop集群中的安全配置过程中的问题.为此,本 ...
- PowerShell 导出SharePoint管理中心解决方式
PowerShell 导出SharePoint管理中心解决方式 SharePoint QQ群有人问能不能下载(导出)管理中心里的解决方式.由于在管理中心中点击解决方式会进入还有一个页面 ...
- 通过Navicat for MySQL远程连接的时候报错mysql 1130的解决方法
在用本地的navicat连接服务器的mysql数据库时候出现下面的问题: 解决的方法: 解决方法: 1.改表法.可能是你的帐号不允许从远程登陆,只能在localhost.这个时候只要在localhos ...
- Intent 传值和 Bundle传值的区别
http://blog.csdn.net/yanzi1225627/article/details/7802819 举个例子 我现在要从A界面 跳转到B界面或者C界面 这样的话 我就需要写2 ...
- hdu1864 最大报销额(01背包)
转载请注明出处:http://blog.csdn.net/u012860063 题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1864 Problem ...
- 让iOS开发变得更有效率-分类、工具类
在工作中整理的一些分类与工具类,分享给大家.这些工具类可以减少项目中的代码量,让代码变得更简洁,可以大大的提升项目的效率,直接拖到项目中使用即可.下载地址:https://github.com/lee ...
- RHEL7虚拟机中不重启的情况下加新硬盘及扩展根分区容量
在VMware中添加一块新的5G硬盘 显示当前分区 # fdisk -l 通常在你在虚拟机中添加一块新硬盘时,你可能会看到新硬盘没有自动加载.这是因为连接到硬盘的SCSI总线需要重新扫描来使得新硬盘可 ...
- centos7安装chrome的历程(fedora同)
安装 首先是下载,地址奉上:http://www.google.cn/chrome/browser/desktop/index.html,选择64 bit .rpm (适用于 Fedora/openS ...