网站的速度非常重要,现在有很多网站优化的工具,如 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. Centos7升级gcc学习笔记

    概述 最近在学习<深入应用C++11-代码与优化与工程级应用>,我的gcc版本是gcc-4.8.5是支持C++11的,但是我在作者的github上看了一些C++例子,其中有些是C++14的 ...

  2. 1.7.7 Spell Checking -拼写检查

    1. SpellCheck SpellCheck组件设计的目的是基于其他,相似,terms来提供内联查询建议.这些建议的依据可以是solr字段中的terms,外部可以创建文本文件, 或者其实lucen ...

  3. UVa OJ 10055

    Problem A Hashmat the brave warrior Input: standard input Output: standard output Hashmat is a brave ...

  4. iOS retain、strong、weak、assign

    iOS retain.strong.weak.assign strong与weak是由ARC新引入的对象变量属性xcode 4.2(ios sdk4.3和以下版本)和之前的版本使用的是retain和a ...

  5. 观察者模式(一)--《Head First DesignPattern》

    观察者模式定义了对象之间的一对多依赖,这样一来,当一个对象改变状态时,它的所有依赖着都会受到通知并且自动更新. 我们先看下类图: 首先我们自己创建Subject接口,定义了注册观察者,移除观察者和通知 ...

  6. SOA资料

    实施: 基于J2EE体系架构搭建符合SOA架构的运营管理平台 成功经验: 携程旅行网在SOA架构方面的探索 SOA在互联网系统中的应用

  7. [Java] Eclipse+Spring学习(一)环境搭建

    转自:http://blog.sina.com.cn/s/blog_7c3736810100qhia.html 最近由于投了一家公司实习,他要java工程师,而我大学3年的精力都花到了ASP.NET和 ...

  8. 【开源项目9】ImageLoaderConfiguration详解

    ImageLoader类中包含了所有操作.他是一个单例,为了获取它的一个单一实例,你需要调用getInstance()方法.在使用 ImageLoader来显示图片之前,你需要初始化它的配置-Imag ...

  9. XAML设计器卡死

    在生成工程时,存在这样一个记录: “未能找到一个或多个间接引用的程序集.分析不需要这些程序集.但是,如果没有这些程序集,分析结果可能不完整”. 表现形式既不是错误,可也不是警告.之所以关注到这个问题, ...

  10. BZOJ 3725

    Description 有一堵长度为n的墙需要刷漆,你有一把长度为k的刷子.墙和刷子都被均匀划分成单位长度的小格,刷子的每一格中都沾有某种颜色(纯色)的漆.你需要用这把刷子在墙上每一个可能的位置(只要 ...