jQuery图片延迟加载插件jQuery.lazyload使用方法(转)
使用方法
1、引用jquery和jquery.lazyload.js到你的页面
<script src="jquery-1.11.0.min.js"></script>
<script src="jquery.lazyload.js?v=1.9.1"></script>
2、为图片加入样式lazy 图片路径引用方法用data-original
<img class="lazy" data-original="img/bmw_m1_hood.jpg">
<img class="lazy" data-original="img/bmw_m1_side.jpg">
3、js出始化lazyload并设置图片显示方式
<script type="text/javascript" charset="utf-8">
$(function() {
$("img.lazy").lazyload({effect: "fadeIn"});
});
</script>
在图片中也可以不使用 class="lazy",初始化时使用:
$("img").lazyload({effect: "fadeIn"});
这样就可以对全局的图片都有效!
4、参数设置
$("img.lazy").lazyload({
placeholder : "img/grey.gif", //用图片提前占位
// placeholder,值为某一图片路径.此图片用来占据将要加载的图片的位置,待图片加载时,占位图则会隐藏
effect: "fadeIn", // 载入使用何种效果
// effect(特效),值有show(直接显示),fadeIn(淡入),slideDown(下拉)等,常用fadeIn
threshold: 200, // 提前开始加载
// threshold,值为数字,代表页面高度.如设置为200,表示滚动条在离目标位置还有200的高度时就开始加载图片,可以做到不让用户察觉
event: 'click', // 事件触发时才加载
// event,值有click(点击),mouseover(鼠标划过),sporty(运动的),foobar(…).可以实现鼠标莫过或点击图片才开始加载,后两个值未测试…
container: $("#container"), // 对某容器中的图片实现效果
// container,值为某容器.lazyload默认在拉动浏览器滚动条时生效,这个参数可以让你在拉动某DIV的滚动条时依次加载其中的图片
failurelimit : 10 // 图片排序混乱时
// failurelimit,值为数字.lazyload默认在找到第一张不在可见区域里的图片时则不再继续加载,但当HTML容器混乱的时候可能出现可见区域内图片并没加载出来的情况,failurelimit意在加载N张可见区域外的图片,以避免出现这个问题.
});
例:经过五秒钟的延迟后,开始加载图片
$(function() {
$("img.lazy").lazyload({
placeholder : "2.jpg",effect: "fadeIn",event : "sporty"
});
});
$(window).bind("load", function() {
var timeout = setTimeout(function() { $("img.lazy").trigger("sporty") }, 5000);
});
jQuery图片延迟加载插件jQuery.lazyload使用方法(转)的更多相关文章
- jQuery图片延迟加载插件jQuery.lazyload
插件描述:jQuery图片延迟加载插件jQuery.lazyload,使用延迟加载在可提高网页下载速度.在某些情况下,它也能帮助减轻服务器负载. 使用方法 引用jquery和jquery.lazy ...
- jQuery图片延迟加载插件jquery.lazyload.js
在实际的项目开发中,我们通常会遇见这样的场景:一个页面有很多图片,而首屏出现的图片大概就一两张,那么我们还要一次性把所有图片都加载出来吗?显然这是愚蠢的,不仅影响页面渲染速度,还浪费带宽.这也就是们通 ...
- jQuery图片延迟加载插件jQuery.lazyload 的使用
使用方法 引用jquery和jquery.lazyload.js到你的页面 1 2 <script src="jquery-1.11.0.min.js"></sc ...
- 第一次自己写jquery图片延迟加载插件,不通用,但修改一下还是可以使用到很多页面上的
不断修改完善中…… /*! * jquery.lazyoading.js *自定义的页面图片延迟加载插件,比网上的jquery.lazyload简单,也更适合自己的网站 *使用方法: 把img 的cl ...
- jQuery图片切换插件jquery.cycle.js
Cycle是一个很棒的jQuery图片切换插件,提供了非常好的功能来帮助大家更简单的使用插件的幻灯功能 下载cycle插件并引入,此时,注意把引入它的代码放在引入jQuery主文件之后. <he ...
- JQuery图片延迟加载插件,动态获取图片长宽尺寸
以前的网站带宽小,没有特别多的大图,现在不同了,各种图片网站如同雨后春笋层出不穷.服务器是抗住了,但是客户端就有意见了,太多的图片必然导致页面加载缓慢,特别是有些table结构的站点更是如此.能否让图 ...
- jquery图片切换插件jquery.cycle.js参数详解
转自:国人的力量 blog.163.com/xz551@126/blog/static/821257972012101541835491/ 自从使用了jquery.cycle.js,我觉得再也不用自己 ...
- 图片延迟加载插件jquery.lazyload.js的使用方法
最新版的jquery.lazyload.js已不再是伪的延迟加载了 一.请按照基本使用方法说明设置 //载入JavaScript 文件 <script src="jquery.js&q ...
- jQuery图片延迟加载插件:jquery.lazyload
----------------------------------------------------------------------------------------------- clas ...
随机推荐
- [cdoj1380] Xiper的奇妙历险(3) (八数码问题 bfs + 预处理)
快要NOIP 2016 了,现在已经停课集训了.计划用10天来复习以前学习过的所有内容.首先就是搜索. 八数码是一道很经典的搜索题,普通的bfs就可求出.为了优化效率,我曾经用过康托展开来优化空间,甚 ...
- 真正意义上下一代 Windows Embedded:有关 Windows 10 "Athens" 的事
早在去年 BUILD 大会上,Joe Belfiore 就在一台巨大的 "脚踩钢琴" 上简短展示过 "Windows on Device"(又名 Windows ...
- Android Studio中有用的快捷键栏
Android Studio中有用的快捷键栏#1 Ahraewi线移动 Alt + Shift +向上/向下❖Alt + Shift +向上/向下 或上下移动在所选位置的行. 删除行 CMD + B ...
- 从原理上搞定编码-- Base64编码
BASE64是一种编码方式,通常用于把二进制数据编码为可写的字符形式的数据.这是一种可逆的编码方式.编码后的数据是一个字符串,其中包含的字符为:A-Z.a-z.0-9.+./共64个字符:26 + 2 ...
- Limiting To Select Only 5 Check Boxes Out Of Ten In Oracle Forms
Suppose you want to give an option to user to select only 5 check boxes from given any number of che ...
- CUBRID学习笔记 35 net驱动错误码和信息 cubrid教程示例
DO.NET Error Code Number Error Code Error Message Note 0 ER_NO_ERROR "No Error" 1 ER_NOT ...
- 百度翻译word-wrap,页面错乱原因查找过程(已修复)
今天群里有人发问, 进入百度翻译http://fanyi.baidu.com/#auto/zh/, 输入word-wrap,发现页面错乱. 寻找错乱原因. 上图 开始查找原因: 1.从请求入手 从ch ...
- Thinkphp 3.2 添加 验证码 如何添加。
1,在home模块indexController.class.php中,加入以下代码 <?php namespace Home\Controller; use Think\Controller; ...
- STRUTS2 嵌套循环
<!--begin 类目循环 --> <s:iterator value="categories" id='i' begin="0" step ...
- python中模块sys与os的一些常用方法
sys模块提供了访问或操作与python解释器相关方法与对象. 我们就列举出常用到的知识,以后,随着学习,不断补充. 几个常用到的动态对象: sys.argv,这是一个列表,它包含了所有传递给脚本的命 ...