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. win7无线网卡的灯突然不亮了的解决办法

    win7无线网卡的灯突然不亮了,百度了一下,按如下的方法解决了:  WIN7中:右键单击“计算机”,选择“管理”进入“计算机管理”,选择“服务和运用”下的“服务”,然后双击“WLAN AutoConf ...

  2. Windows平台下Python2.7中pip的安装方法

    本文允许转载,转载请保留全文! [请先阅读][说明&总目录]http://www.cnblogs.com/tbcaaa8/p/4415055.html 1. 文件下载 需要下载并运行ez_se ...

  3. SQL Server 2008 的安装

    SQL Server 2008简体中文企业版下载(SQL2008) SQL Server 2008分为SQL Server 2008企业版.标准版.工作组版.Web版.开发者版.Express版.Co ...

  4. c++实例化对象

    今天看到c++实例化对象,有点懵了.Activity_Log the_log (theLogPtr, Tree->GetBranch());这是那一段小代码,开始没看懂.java看习惯了总喜欢n ...

  5. Window VNC远程控制LINUX:VNC详细配置介绍

    Window VNC远程控制LINUX:VNC详细配置介绍 //---------------------------------------vnc linux下的详细配置 1.VNC的启动/停止/重 ...

  6. Hibernate 检索查询的几种方式(HQL,QBC,本地SQL,集成Spring等)

    1.非集成Spring hibernate的检索方式,主要有以下五种. 1.导航对象图检索方式.(根据已经加载的对象,导航到其他对象.) 2.OID检索方式.(按照对象的OID来检索对象.) 3.HQ ...

  7. 阿里云服务器Node环境配置

    最近,将网站的阿里云服务器迁移到阿里云北京机房,记录下CentOS的迁移过程. 首次登录云服务器,要先进行用户设置. 用户设置 首先用passwd命令修改超级管理员root密码. $ passwd 根 ...

  8. 向Array中添加选择排序

    选择排序思路 在无序区中选出最小的元素,然后将它和有序区的第一个元素交换位置. 选择排序实现 Function.prototype.method = function(name, func){ thi ...

  9. Node.js 学习(七)Node项目部署工具之forever

    平常无论是使用命令行还是终端通过node app.js启动项目时,当命令行或终端关闭时项目也就随之关闭了;forever则可以在cmd或ssh连接断开时,让项目一直运行,而且可以在项目崩溃时自动重启 ...

  10. NEST.net Client For Elasticsearch简单应用

    NEST.net Client For Elasticsearch简单应用 由于最近的一个项目中的搜索部分要用到 Elasticsearch 来实现搜索功能,苦于英文差及该方面的系统性资料不好找,在实 ...