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. EF4.1之贪婪加载和延迟加载

    默认情况下,EF4.1是只查询到涉及到的数据对象,但是EF4.1支持两种方法进行控制其加载: 1.贪婪加载 2.延迟加载 使用的表还是上次使用的Order 和 OrderDetails两张表来举例说明 ...

  2. 自动化TOPSQL优化脚本

        '自动化优化’只是个噱头,要能自动化世界就安静了.只是行里非得要这么个名字.       最基本的抓取系统topsql,是通过awr,但是这样有诸多弊端和不灵活,比如数量较少.不能直接看执行计 ...

  3. 53张牌中找出缺少的牌的花色和点数--raid3,4,5,6的容错原理

    一副扑克牌,抽出一张,要求找出抽出的牌的点数和花色. 算法的主要思想就是用异或运算来确定丢的牌的花色.四种花色分别如下表示:红桃用1(二进制0001)表示,黑桃用2(二进制0010)表示,黑桃用4(0 ...

  4. Java通过反射机制修改类中的私有属性的值

    首先创建一个类包含一个私有属性: class PrivateField{ private String username = "Jason"; } 通过反射机制修改username ...

  5. Node.js 项目搭建

    关于 本书致力于教会你如何用Node.js来开发应用,过程中会传授你所有所需的“高级”JavaScript知识.本书绝不是一本“Hello World”的教程. 状态 你正在阅读的已经是本书的最终版. ...

  6. Ruby 多线程探索实践与归纳总结

    Ruby 多线程 每个正在系统上运行的程序都是一个进程.每个进程包含一到多个线程. 线程是程序中一个单一的顺序控制流程,在单个程序中同时运行多个线程完成不同的工作,称为多线程. Ruby 中我们可以通 ...

  7. java中的substring用法

    String str="我是中国人"; str = str.substring(0, 2) +"_"+str.substring(3, 4); 结果:str=& ...

  8. Netsharp快速入门(之2) 基础档案(之A 创建插件和资源)

    作者:秋时 杨昶   时间:2014-02-15  转载须说明出处 第三章     基础档案开发 本文不再对此需求进行分析设计,其实分析设计的结果在下文会体现在平台的使用过程中,这个销售系统分成两个模 ...

  9. HDU 5293 Tree chain problem 树形dp+dfs序+树状数组+LCA

    题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=5293 题意: 给你一些链,每条链都有自己的价值,求不相交不重合的链能够组成的最大价值. 题解: 树形 ...

  10. poj 1330 Nearest Common Ancestors LCA

    题目链接:http://poj.org/problem?id=1330 A rooted tree is a well-known data structure in computer science ...