网站的速度非常重要,现在有很多网站优化的工具,如 Google 的Page Speed,Yahoo 的 YSlow,对于网页图片,Yahoo 还提供 Smush.it这个工具对图片进行批量压缩,但是对于图片非常多的网站,载入网页还是需要比较长的时间,这个时候我们可以使用 Lazy Load 这个 jQuery 插件来延迟加载图片。

Lazy loader 是一个延迟加载图片的 jQuery 插件,在一些图片非常多的网站中非常有用,在在浏览器可视区域外的图片不会被载入,直到用户将页面滚动到它们所在的位置才加载,这样对于含有很多图片的比较长的网页来说,可以加载的更快,并且还能节省服务器带宽。

Lazy Loader 使用也非常简单,首先确保你的页面已经加载 jQuery Javascript 库,然后在加载 Lazy Load 的 Javascript 文件:

<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.lazyload.js" type="text/javascript"></script>

然后在页面的 header 添加如下代码即可:

<script type="text/javascript"></script>
$(document).ready(function(){
$("img").lazyload({
placeholder : "/images/grey.gif",
effect : "fadeIn"
});
}
</script>

延迟加载图片的 jQuery 插件:Lazy Load的更多相关文章

  1. Lazy Load, 延迟加载图片的 jQuery 插件 - NeoEase

    body { font-family: "Microsoft YaHei UI","Microsoft YaHei",SimSun,"Segoe UI ...

  2. Lazy Load, 延迟加载图片的 jQuery 插件.

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

  3. 延迟加载图片的 jQuery 插件——lazyload.js

    lazyload 这个 jQuery 插件,是用来缓冲加载图片的插件.如果一篇文章很长有很多图片的话,下载图片就需要很多时间.而这款插件,会检测你的滚动情况,只有你要看到那个图片的时 候,它才会从后台 ...

  4. Lazy Load, 延迟加载图片的 jQuery 插件【备忘】

    http://www.neoease.com/lazy-load-jquery-plugin-delay-load-image/ jQuery Unveil – 另一款非常轻量的延迟加载插件 http ...

  5. 插件介绍 :cropper是一款使用简单且功能强大的图片剪裁jQuery插件。

    简要教程 cropper是一款使用简单且功能强大的图片剪裁jQuery插件.该图片剪裁插件支持图片放大缩小,支持鼠标滚轮操作,支持图片旋转,支持触摸屏设备,支持canvas,并且支持跨浏览器使用. c ...

  6. jQuery延迟加载插件(Lazy Load)详解

    最 新版本的Lazy Load并不能替代你的网页.即便你使用JavaScript移除了图片的src属性,有些现代的浏览器仍然会加载图片.现在你必须修改你的html代 码,使用占位图片作为img标签的s ...

  7. 缓冲加载图片的 jQuery 插件 lazyload.js 使用方法详解

    在写代码的时候,经常会用到懒加载的模式,以前是通过window.onload的模式去加载,但是图片很多或者用ajax请求的时候,就会很麻烦,现在用lazyload的模式加载方便很多 <!doct ...

  8. 推荐两款简单好用的图片放大jquery插件

    一.zoomfiy.js 推荐可以从这里下载 使用说明: 使用该jquery 插件引入该插件的js:zoomfiy.js 或 min引入该插件的css:zoomfiy.css 或 min前后顺序都可j ...

  9. 动态延迟加载网页元素jQuery插件scrollLoading

    如果一个网页很长,那么该页面的加载时间也会相应的较长.而这里给大家介绍的这个jQuery插件scrollLoading的作用则是,对页面元素进行动态加载,通俗的说就是滚到哪就加载到哪,屏幕以下看不见的 ...

随机推荐

  1. 【PHP代码审计】 那些年我们一起挖掘SQL注入 - 8.全局防护盲点的总结下篇

    0x01 背景 现在的WEB应用对SQL注入的防护基本都是判断GPC是否开启,然后使用addlashes函数对单引号等特殊字符进行转义.但仅仅使用这样的防护是存在很多盲点的,接上篇http://www ...

  2. 【PHP代码审计】 那些年我们一起挖掘SQL注入 - 7.全局防护盲点的总结上篇

    0x01 背景 现在的WEB应用对SQL注入的防护基本都是判断GPC是否开启,然后使用addlashes函数对单引号等特殊字符进行转义.但仅仅使用这样的防护是存在很多盲点的,比如最经典的整型参数传递, ...

  3. <转>一道面试题比较synchronized和读写锁

    一.科普定义(原文:http://903497571.iteye.com/blog/1874752) 这篇博文的两个主角“synchronized”和“读写锁” 1)synchronized 这个同步 ...

  4. Python Counter() 的实现

    Table of Contents 1. collections.Counter 源码实现 1.1. __init__ 1.2. update 1.3. most_common 1.3.1. item ...

  5. Play on Words 欧拉通路(回路)判断

    Play on Words note:  判断一下连通性. #include <iostream> #include <cstdio> #include <cstring ...

  6. MySQL(26):事务的隔离级别出现问题之 幻读

    1. 幻读 幻读(Phantom Read)又称为虚读,是指在一个事务内两次查询中数据条数不一致,幻读和不重复读有些类型,同样是在两次查询过程中,不同的是,幻读是由于其他事务做了插入记录的操作,导致记 ...

  7. TFS 2010 使用手册(一)安装与配置

    本文转自cnblogs 大辉狼 的文章: http://www.cnblogs.com/wph1129/archive/2010/11/10/1873348.html http://www.cnblo ...

  8. matlab 和 origin作图去除白边,字体调节

    一 matlab作图 (1)在图形文件figure的菜单上点击file->export setup, 在size选项中,对"expand axes to fill figure&quo ...

  9. Androidstudio 点9图报错的问题

    在eclipse上.9图能够正常使用,但是到了Androidstudio上就报错无法引用,提示找不到.9图的问题.   解决方案: Androidstudio对.9图进行了更严格的定义, 1. 如果一 ...

  10. JavaScript 中的算术运算

    JavaScript中算术运算在溢出(overflow).下溢(underflow)或被零整除时不会报错,当数字运算结果超过了JavaScript所能表示的数字上限(溢出),结果为一个特殊的无穷大(i ...