网站的速度非常重要,现在有很多网站优化的工具,如 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. Data Struture 之 指针

    指针是C语言中广泛使用的一种数据类型. 运用指针编程是C语言最主要的风格之一.利用指针变量可以表示各种数据结构: 能很方便地使用数组和字符串:  并能象汇编语言一样处理内存地址,从而编出精练而高效的程 ...

  2. C#.Net中的转义字符(转)

    当声明一个字符串变量时有一些字符是不能以平常的方式包含在变量中的.为了解决这个问题,C#提供了两种不同的方法. 第一种方法是使用’转义序列’.例如,我们想得到如下的字符串 “Hello World H ...

  3. C#面向对象(四)虚方法实现多态

    一.虚方法实现多态 1,创建一个people基类 using System; using System.Collections.Generic; using System.Linq; using Sy ...

  4. CSU 1552: Friends 图论匹配+超级大素数判定

    1552: Friends Time Limit: 3 Sec  Memory Limit: 256 MBSubmit: 163  Solved: 34[Submit][Status][Web Boa ...

  5. SSAS中Cube的结构

    在SSAS(SQL Server Analysis Services)中构建Cube和编写MDX的时候,我们很容易被一些名词弄糊涂,比如:Dimension(维度),Measures Dimensio ...

  6. 【Shell脚本学习4】几种常见的Shell

    上面提到过,Shell是一种脚本语言,那么,就必须有解释器来执行这些脚本. Unix/Linux上常见的Shell脚本解释器有bash.sh.csh.ksh等,习惯上把它们称作一种Shell.我们常说 ...

  7. Android之EditText文本变化的监听

    监听EditText的文本变化需要给EditText控件加一个addTextChangeListener监听器 editText.addTextChangeListener(textWatcher); ...

  8. 安装 vsftpd

    (1)安装vsftpdsudo apt-get install vsftpd (2)配置sudo vi /etc/vsftpd.conf #anonymous_enable=YESlocal_enab ...

  9. Session共享的简单总结

    1.同服务器.同一域名.不同应用(端口.虚拟目录等) 这种很简单,把sessionState保存到SQLServer,aspnet_regsql之后,修改存储过程TempGetAppID,把 SET ...

  10. oracle PL/SQL(procedure language/SQL)程序设计之函数+过程+包

    匿名PL/SQL块回顾 DECLARE (可选)    定义在PL/SQL块中要使用的对象BEGIN (必须)    执行语句EXCEPTION (可选)    错误处理语句END; (必须)匿名块( ...