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. 标准非STL之bitset

    template <size_t N> class bitset; BitsetA bitset stores bits (elements with only two possible ...

  2. 我存在,你深深的循环里--从反射看JSON死循环

      JSON有一个非常经典的问题:JSONException: There is a cycle in the hierarchy!俗称死循环.解决这个问题至少有三种以上的办法,总之一句话就是过滤.今 ...

  3. Window 添加定时任务

    简单任务 右键点击 我的电脑->管理->任务计划程序库->创建基本任务 然后选择任务类型,触发时间,触发程序就可以了,可以精确到秒 带参数的计划任务 如果执行程序是cmd 可选参数那 ...

  4. yii的常用配置文件

    <?php return array( 'basePath' => dirname(__FILE__).DIRECTORY_SEPARATOR.'..', //当前应用根目录路径 'nam ...

  5. MySQL基本概念

    MySQL 数据库 MySQL可分为三个层次:文件层次,服务层次,界面 常用的数据类型:int 整数float double decimal ——小数(要在十进位栏里设置小数点后最大显示位数)varc ...

  6. IIS和MVC

    现象:MVC项目部署到IIS(7.5)后,浏览时只显示文件目录,不是网站 解决办法 1.服务器安装程序对应的Framework版本 2.服务器安装程序对应的MVC版本 3.安装CGI和ISAPI扩展: ...

  7. 转载:百度原CTO李一男经典语录

    原文地址:http://www.cnblogs.com/marvin/archive/2010/01/20/1652088.html 百度原CTO李一男经典语录 [1]好好规划自己的路,不要跟着感觉走 ...

  8. 【BZOJ】【1863】【ZJOI2006】trouble 皇帝的烦恼

    二分+DP Orz KuribohG 神题啊= = 满足单调性是比较显然的…… 然而蒟蒻并不会判断能否满足……QwQ 神一样的DP姿势:f[i]表示第 i 个与第1个最多有多少个相同,g[i]表示最少 ...

  9. 【BZOJ】【1020】【SHOI2008】安全的航线flight

    计算几何/二分/迭代/搜索+剪枝 写三个tag可能是因为从哪个方向来理解都可以吧…… 我完全不会计算几何所以抄了ydc的代码 题解:http://ydcydcy1.blog.163.com/blog/ ...

  10. Winform跨线程操作界面的策略

    BeginInvoke(new ThreadStart(() => toolStripButton1.Text = "aaa")); 1.非跨线程操作和部分跨线程get不会引 ...