延迟加载图片的 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的作用则是,对页面元素进行动态加载,通俗的说就是滚到哪就加载到哪,屏幕以下看不见的 ...
随机推荐
- jquery datatable[表格处理]
最近在公司实习发现一个额功能强大的表格解决方案,了解了一下,先总结如下: 1.官网:http://www.datatables.net/ 2.需要特别注意:被dataTable处理的table对象,必 ...
- Android adb not responsing
netstat -aon | findstr "5037" and you will find the process "kadb.exe" that used ...
- 【Android Api 翻译3】android api 完整翻译之Application Fundamentals (学习android必须知道的)
Android应用程序是用Java编程语言编写的.Android SDK工具把应用程序的代码.数据和资源文件一起编译到一个Android程序包中(这个程序包是以.apk为后缀的归档文件),一个Andr ...
- java 动态代理范例 InvocationHandler与Proxy
java 动态代理范例 InvocationHandler与Proxy,拦截与代理 java.lang.reflect.Proxy,Proxy 提供用于创建动态代理类和实例的静态方法.newProxy ...
- CMP指令(转)
刚刚看到了cmp指令,一开始有点晕.后来上网找了些资料,终于看明白了,为了方便初学者,我就简单写下我的思路吧.高手绕过,谢谢! cmp(compare)指令进行比较两个操作数的大小 例:cmp opr ...
- 京东2017 C++一面
一面直接跪,日 1. 重写和重载的区别 答的一般 2. C++内存分配方式 不会 3. TCP ...
- 初识 Asp.Net内置对象之Session对象
Session对象 Session对象用于存储在多个页面调用之间特定用户的信息.Session对象只针对单一网站使用者,不同的客户端无法相互访问.Session对象中止联机机器离现时,,也就是当网站使 ...
- Matlab之文件操作
1.判断是否存在文件夹:if (exist(folderName,'dir')) 2.创建文件夹:mkdir(folderName) 3.删除文件夹:rmdir(folderName,'s') 4.当 ...
- w3cschool关于list-style-position时的另外发现
首先list-style-position有inside和outside... 另外发现:设置inline-block时 那个圆点消失了.. <!DOCTYPE html> <htm ...
- MDNavBarView下拉导航菜单(仿美团导航下拉菜单)
说到下拉导航菜单这个东西用得还真不少,细心算一下做开发以来这样的菜单已经写了第三次了,但基本都是不能复用.感觉特累人.不经意看到同事写一个类似的下拉菜单,但他引用了开源库仿大众菜单的库,大致看了一下, ...