延迟加载图片的 jQuery 插件:Lazy Load
网站的速度非常重要,现在有很多网站优化的工具,如 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的更多相关文章
- Lazy Load, 延迟加载图片的 jQuery 插件 - NeoEase
body { font-family: "Microsoft YaHei UI","Microsoft YaHei",SimSun,"Segoe UI ...
- Lazy Load, 延迟加载图片的 jQuery 插件.
Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预 ...
- 延迟加载图片的 jQuery 插件——lazyload.js
lazyload 这个 jQuery 插件,是用来缓冲加载图片的插件.如果一篇文章很长有很多图片的话,下载图片就需要很多时间.而这款插件,会检测你的滚动情况,只有你要看到那个图片的时 候,它才会从后台 ...
- Lazy Load, 延迟加载图片的 jQuery 插件【备忘】
http://www.neoease.com/lazy-load-jquery-plugin-delay-load-image/ jQuery Unveil – 另一款非常轻量的延迟加载插件 http ...
- 插件介绍 :cropper是一款使用简单且功能强大的图片剪裁jQuery插件。
简要教程 cropper是一款使用简单且功能强大的图片剪裁jQuery插件.该图片剪裁插件支持图片放大缩小,支持鼠标滚轮操作,支持图片旋转,支持触摸屏设备,支持canvas,并且支持跨浏览器使用. c ...
- jQuery延迟加载插件(Lazy Load)详解
最 新版本的Lazy Load并不能替代你的网页.即便你使用JavaScript移除了图片的src属性,有些现代的浏览器仍然会加载图片.现在你必须修改你的html代 码,使用占位图片作为img标签的s ...
- 缓冲加载图片的 jQuery 插件 lazyload.js 使用方法详解
在写代码的时候,经常会用到懒加载的模式,以前是通过window.onload的模式去加载,但是图片很多或者用ajax请求的时候,就会很麻烦,现在用lazyload的模式加载方便很多 <!doct ...
- 推荐两款简单好用的图片放大jquery插件
一.zoomfiy.js 推荐可以从这里下载 使用说明: 使用该jquery 插件引入该插件的js:zoomfiy.js 或 min引入该插件的css:zoomfiy.css 或 min前后顺序都可j ...
- 动态延迟加载网页元素jQuery插件scrollLoading
如果一个网页很长,那么该页面的加载时间也会相应的较长.而这里给大家介绍的这个jQuery插件scrollLoading的作用则是,对页面元素进行动态加载,通俗的说就是滚到哪就加载到哪,屏幕以下看不见的 ...
随机推荐
- itextsharp去掉PDF加密
在操作PDF文件时会遇到PDF文件加密了,不能操作的问题,从网络中查找资料一上午,鼓捣出如下的代码,可实现将已加密的PDF转化成未加密的PDF文件,纯代码,无需借助PDF解密软件,使用前需要导入如下引 ...
- 【Shell脚本学习3】什么时候使用Shell
因为Shell似乎是各UNIX系统之间通用的功能,并且经过了POSIX的标准化.因此,Shell脚本只要“用心写”一次,即可应用到很多系统上.因此,之所以要使用Shell脚本是基于: 简单性:Shel ...
- Oracle 11g XE 试用记录
安装之前先删除系统环境变量中的oracle_home等配置(如果存在的话): 如果安装后出现Web管理界面不能访问或者数据库不能连接的情况,卸载再多安装几次可能就正常了.状态不正常时,可以使用 C:\ ...
- angularjs表格方式显示数据
<table> <tr ng-repeat="x in names"> <td>{{ x.Name }}</td> <td&g ...
- DWZ框架Ajax无刷新表单提交处理流程
DWZ框架Ajax无刷新表单提交处理流程是: 1. ajax表单提交给服务器 2. 服务器返回一个固定格式json结构 3. js会调函数根据这个json数据做相应 ...
- CentOS服务器的16个监控命令
你可以通过图形化用户界面(GUI)程序来获取这些外壳命令提供的大量信息,具体取决于使用哪一种Linux发行版.比如说,SUSE Linux就有一款出色的.图形化配置和管理工具YaST,KDE的KDE ...
- Oracle数据库作业-6 查询“张旭“教师任课的学生成绩。
23.查询"张旭"教师任课的学生成绩. select * from score s where cno in ( select cno from course where tno ...
- SQL server 2008 建立新用户
进入Instance下的‘安全性’->登录名, 可以选择SQL server 验证,‘强制实施密码策略’.’状态‘ 为启用. 在使用的数据库下‘安全性’->登录名,选择‘登录名’,输入之前 ...
- Web前端学习笔记3
1.meta标签. 1.1 <meta charset="utf-8"> charset:字符集 1.2 <meta name="keywords&qu ...
- 【Cocos2d入门教程三】HelloWorld之一目了然
什么程序都是从HelloWorld先开始.同样Cocos2d-x我们先从HelloWorld进行下手.下面是HelloWorld的运行完成图: 建立好的Cocos游戏项目中会有两个比较常用接触的文件夹 ...