图片延迟加载插件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 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预 ...
随机推荐
- poj 3608 Bridge Across Islands
题目:计算两个不相交凸多边形间的最小距离. 分析:计算几何.凸包.旋转卡壳.分别求出凸包,利用旋转卡壳求出对踵点对,枚举距离即可. 注意:1.利用向量法判断旋转,而不是计算角度:避免精度问题和TLE. ...
- Android五大布局重新回顾
- Java工作队列和线程池
背景 最近的需要做一个与设备通信的web项目.当然,我们需要写好与设备之间的通信协议(socket).大致的时序逻辑时:当用户用浏览器点击页面某一控件后,它就向后台发送一个post请求,后台解析 ...
- 在Eclipse中怎样公布创建的JavaWebproject
博客<在Eclipse中怎样创建JavaWebproject>中图文并茂的说明了Eclipse中创建JavaWebproject的方法:博客<怎样为Eclipse开发工具中创建的Ja ...
- Test Bench基础知识笔记
学的内容多了,好多指令和用法都容易遗忘和混淆,出现这种情况就需要勤记笔记,忘记了多翻阅几次,基本上就能完全记住了. [`timescale 1ns/1ps]前一个1ns表示时延时间,后一个1ps表示时 ...
- 让Tomcat支持中文路径名和中文文件名
http://hdwangyi.iteye.com/blog/107709 Tomcat是Java开发者使用得较多的一个Web服务器,因为它占用资源小,运行速度快等特点,深受Java Web程序员的喜 ...
- Android注解支持(Support Annotations)
注解支持(Support Annotations) Android support library从19.1版本开始引入了一个新的注解库,它包含很多有用的元注解,你能用它们修饰你的代码,帮助你发现bu ...
- AFNetWorking源码详解(二)
来源:Yuzeyang 链接:http://zeeyang.com/2016/03/15/AFNetWorking-two/ AFHTTPSessionManager继承于AFURLSessionMa ...
- C按格式输出数字
看到有人问如何输出如下格式的字符: //1 6 10 13 15 //2 7 11 14 //3 8 12 //4 9 //5 于是写了一个,以后方便查看. main() { /* rows i j ...
- angularjs filter cut string
angular.module('App.controllers.MyCtrl', []) .controller('MyCtrl', function (my) {}) .filter('cut', ...