lazyload是jquery的插件,作为延迟加载图片,减压服务器压力。

如何使用:

先把

<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.lazyload.min.js" type="text/javascript"></script>放在body里面
修改html里面的img src为占位符1*1像素灰色的gif代码如下:
<img src="img/grey.gif" data-original="img/bmw_m1_hood.jpg" />

基本处理图片代码如下
$(function(){
$("img[data-original]").lazyload();
})

提前加载图片代码
$("img.lazy").lazyload({ threshold : 6 });数字可以修改
事件触发代码:

事件可以是任何 jQuery 时间, 如: click 和 mouseover. 你还可以使用自定义的事件, 如: sporty 和 foobar. 默认情况下处于等待状态, 直到用户滚动到窗口上图片所在位置. 在灰色占位图片被点击之前阻止加载图片, 你可以这样做:

$("img").lazyload({
placeholder : "img/grey.gif",
event : "click"
});
淡出效果代码:
$("img.lazy").lazyload({
effect : "fadeIn"
});
加载隐藏的代码:特别是做选显卡的是总是要隐藏图片这个就要给设置为skip_invisible : false不然就加载不出来
$("img[data-original]").lazyload({skip_invisible : false});
参考英文网站:http://www.appelsiini.net/projects/lazyload

jquery.lazyload用法的更多相关文章

  1. jQuery之jquery.lazyload.js插件用法

    研究背景:网站中如果图片过多,就会因为加载图片而等待很长时间,此时我们就用到图片延时加载插件jquery.lazyload.js,这个插件可以让我们在向下滚动的时候加载图片.让网页首屏尽可能快的加载进 ...

  2. 延迟加载外部js文件,延迟加载图片(jquery.lazyload.js和echo,js)

    js里一说到延迟加载,大都离不开两种情形,即外部Js文件的延迟加载,以及网页图片的延迟加载: 1.首先简单说一下js文件的3种延迟加载方式: (1)<script type="text ...

  3. 图片懒加载jquery lazyload

    <script type="text/javascript" src="jquery-1.11.3.min.js"></script>& ...

  4. 懒加载插件- jquery.lazyload.js

    Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预 ...

  5. jQuery.lazyload

    Lazy Load延迟加载也有的称为惰性加载,是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它 ...

  6. jquery.lazyload 实现图片延迟加载jquery插件

    看到了淘宝产品介绍中,图片是在下拉滚动条时加载,这是一个很不错的用户体验.减少了页面加载的时间了,也减轻了服务器的压力,就查了下用JQuery..   什么是ImageLazyLoad技术 在页面上图 ...

  7. jquery懒加载jquery.lazyload.js

    Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预 ...

  8. jQuery lazyload 懒加载

    Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预 ...

  9. jQuery $.each用法[转]

    jQuery $.each用法 以下内容非原创,来自百度文库http://wenku.baidu.com/view/4796b6145f0e7cd18425368e.html 通过它,你可以遍历对象. ...

随机推荐

  1. cocos游戏的真正入口,用C++实现的demo版本

    1.cocos游戏的出发点 在main函数中有一句:   return CCApplication::sharedApplication()->run(); 2.经过层层深入发现,真正的入口:  ...

  2. USB硬件远程共享解决iphone已停用

    悲剧的在iphone拆过电池之后,再开机显示iphone已停用,请在23000000分钟后再试一次 算算这得45年了,可以留给孙子用了... 网上除了刷机和有同步过的电脑貌似没有别的办法了 因是旧系统 ...

  3. json序列指定名称

    class jsonModel{ public string md5 { get; set; } public object report { get; set; } public string @v ...

  4. elasticsearch查询之term,range,prefix

    荒废了很久的博客园,现在又回来了.233333 最近在研究elasticsearch 日志查询: 1.term:代表完全匹配,即不进行分词器分析,文档中必须包含整个搜索的词汇 2.range:主要是对 ...

  5. 解决a different object with the same identifier value was already associated with the session错误

    [转]解决a different object with the same identifier value was already associated with the session错误 这个错 ...

  6. c++ dirname() basename()

    http://linux.about.com/library/cmd/blcmdl3_dirname.htm #include <iostream> #include <libgen ...

  7. linux I/O

    一) I/O调度程序的总结     1) 当向设备写入数据块或是从设备读出数据块时,请求都被安置在一个队列中等待完成.     2) 每个块设备都有它自己的队列.     3) I/O调度程序负责维护 ...

  8. zip&rar格式压缩包的解压缩

    实际工作中例子: 首先需要引入两个jar包: 注意:支持压缩软件4.20及以上版本 (1)压缩包的解压: (2)压缩包的压缩打包 zip格式:

  9. Post 的数据被截断

    原因: Form 域 POST 提交数据 100K(可能不是这个值) 限制的解决方案   因为微软这个限制是对表单内每个域(第一个控件)的限制.问题的解决办法是,对于一个需要发送大数据的域,在提交表单 ...

  10. Codeforces Round #204 (Div. 2)->C. Jeff and Rounding

    C. Jeff and Rounding time limit per test 1 second memory limit per test 256 megabytes input standard ...