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. P3382: [Usaco2004 Open]Cave Cows 3 洞穴里的牛之三

    首先,我们先确定,最长的曼哈顿距离只可能为 x1+y2-(x2+y2) 和 x1-y1-(x2-y2) 所以我们只需要维护四个值, 分别代表 max(x+y) ; max(x-y) ; min(x+y ...

  2. cocos2dx中使用声音引擎需要包含的头文件

    1.需要包含的头文件和命名空间 #include "SimpleAudioEngine.h"using namespace CocosDenshion;

  3. 使用Log Explorer查看和恢复数据

    由于一次意外操作,把QC数据库中的BUG表数据给删掉了.崩溃-上网找了下恢复方法,找到一款Log Explorer.下载安装使用后,发现这款软件的确不错,收藏ing.   本次的使用的Log Expl ...

  4. Visual Studio 2012 [ADO.NET 实体数据模型]丢失没有的解决方法

    首先打开控制面板,看是否已经安装EF,如果已经安装,先卸载,然后,首先打开安装包,找到/packages/EFTools目录下的EFTools.msi,将它们复制自己计算机的某一目录下,例如:C:\t ...

  5. OpenCms 集成外部Solr Server

    OpenCms默认是以内嵌的Solr作为全文搜索服务的,不过我们也可以配置一个独立的Solr搜索服务器 设置外部Solr Server 1. 从Solr 官方站点http://lucene.apach ...

  6. poj 2987 Firing 最大权闭合图

    题目链接:http://poj.org/problem?id=2987 You’ve finally got mad at “the world’s most stupid” employees of ...

  7. poj 1113 Wall

    题目链接:http://poj.org/problem?id=1113 题目大意:给出点集和一个长度L,要求用最短长度的围墙把所有点集围住,并且围墙每一处距离所有点的距离最少为L,求围墙的长度. 解法 ...

  8. 【POJ】【1821】Fence

    DP/单调队列优化 题意:k个人粉刷总长为n的墙壁(或者说栅栏?),每个人有一个必刷点s[i](这个人也可以一点也不刷,如果刷就必须刷这个点),最大粉刷长度l[i](必须是连续粉刷一段),和粉刷一格的 ...

  9. 超快的 FastText

    Word2Vec 作者.脸书科学家 Mikolov 文本分类新作 fastText:方法简单,号称并不需要深度学习那样几小时或者几天的训练时间,在普通 CPU 上最快几十秒就可以训练模型,得到不错的结 ...

  10. ZOJ2929 Penalty Kick(概率)

    题目挺水的,但由于其独特的阅读量比赛的时候没发现这道水题,在此做一下翻译,如果有人搜到这翻译的话有帮助的话自然最好啦. 中国队平局进入最后的点球决胜局,首先抛硬币决定谁先罚球,然后先是罚五球,如果罚的 ...