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

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

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

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

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

  1. <script type="text/javascript"></script>
  2. $(document).ready(function(){
  3. $("img").lazyload({
  4. placeholder : "/images/grey.gif",
  5. effect : "fadeIn"
  6. });
  7. }
  8. </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. CSRF 攻击的应对之道--转

    http://www.ibm.com/developerworks/cn/web/1102_niugang_csrf/ 简介: CSRF(Cross Site Request Forgery, 跨站域 ...

  2. seleniu IDE 点点滴滴

    在使用selenium webdriver +python 的过程中遇见了许多的问题,这些问题在网上都没有找到很好的答案,后来在看selenium IDE的时候发现这里面有很好的解决方法,写写.记记. ...

  3. 中科院 2014年GCT考前辅导课程安排

    : 2014年GCT考前辅导课程安排 发布时间: 2014-07-14 阅读次数:1225                       默认字体                   9pt       ...

  4. Quoit Design

    Time Limit: 10000/5000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total Submission ...

  5. 【Mood-3】心声

    每天醒来,我都会想明白一件事情,时间是不会停下来的,如果打算活下去的话,那么我们会有25岁,会有30岁,更会有40岁,为了不让时间风干我的理想,未来只剩下抱怨,那么为明天伏笔,今天只有努力.耸耸背上行 ...

  6. 不停服务情况下升级nginx

    第三方支付平台因安全问题对nginx做了升级操作,为了不影响业务,整个操作过程都不能停服务,因此对升级方法做出了要求.以下为我整理的生产环境实际操作方法,已在第三方支付平台上成功应用,希望对即将或者可 ...

  7. ie下使用firebug

    https://getfirebug.com/firebuglite/ 是介绍firebug在别的浏览器如何使用 或者在html中引入firebug-lite.js,然后安F12 <script ...

  8. (ASP.NET)总结MVC中@Html表单用法

    1.当type类型是text时:@Html.TextBoxFor(model => Model.Name,new{@style = "width: 50px;", @clas ...

  9. Eclipse中web项目的默认发布路径改为外部Tomcat中webapp路径

    可参考http://www.cnblogs.com/mihu/p/4772509.html 和http://www.cnblogs.com/dyllove98/archive/2013/06/07/3 ...

  10. swift(一)

    var floatNum:Float = 10.2 //浮点型 var double:Double = 10.3333 //双精度浮点型 var isSuccess:Bool = true //fal ...