[转载]jQuery.lazyload详解 - 图片延时加载
jQuery实现图片延迟加载,不知道是否可以节省带宽呢?
有人知道吗?
这究竟只是一个视觉特效还是真的能延迟加载减少服务器的请求呢?
<script type="text/javascript" src="<?php bloginfo('template_directory');?>/js/jquery.lazyload.js"></script>
<script type="text/javascript">
$(function() {
$("img").lazyload({
effect : "fadeIn"
});
});
</script>
其中img是延迟加载所有图片,也可以根据不同模板作相应改动,比如我这个主题,可以改成#post img,这样只延迟加载#post 容器内的图片,否则可能影响到侧边图片的加载,主要是留言者头像可能会最后加载;
fadeIn是图片显示效果
这样基本就可以了!
如果上面的功能可能没有达到你的要求,还有几个选项可供设置。
可以设置阀值来控制 灵敏度
$(“img”).lazyload({ threshold : 200 });
把阀值设置成200 意思就是当图片没有看到之前先load 200像素。当然了你也可以通过设置占位符图片和自定事件来触发加载图片事件
$("img").lazyload({
placeholder : "img/grey.gif",
event : "click"
});
还可以通过定义effect 参数来定义一些图片显示效果
$("img").lazyload({
placeholder : "img/grey.gif",
effect : "fadeIn"
});
事件触发加载,事件可以是任何 jQuery 时间, 如: click 和 mouseover. 你还可以使用自定义的事件, 如: sporty 和 foobar. 默认情况下处于等待状态, 直到用户滚动到窗口上图片所在位置. 在灰色占位图片被点击之前阻止加载图片, 你可以这样做:
$("img").lazyload({
placeholder : "img/grey.gif",
event : "click"
});
延迟加载图片,Lazy Load 插件的一个不完整的功能, 但是这也能用来实现图片的延迟加载. 下面的代码实现了页面加载完成后再加载. 页面加载完成 5 秒后, 指定区域内的图片会自动进行加载.
$(function() {
$("img:below-the-fold").lazyload({
placeholder : "img/grey.gif",
event : "sporty"
});
});
$(window).bind("load", function() {
var timeout = setTimeout(function() {$("img").trigger("sporty")}, 5000);
});
图片在容器里面你可以将插件用在可滚动容器的图片上, 例如带滚动条的 DIV 元素. 你要做的只是将容器定义为 jQuery 对象并作为参数传到初始化方法里面.
CSS
#container {
height: 600px;
overflow: scroll;
}
JavaScript 代码:
$("img").lazyload({
placeholder : "img/grey.gif",
container: $("#container")
});
当图片不顺序排列,滚动页面的时候, Lazy Load 会循环为加载的图片. 在循环中检测图片是否在可视区域内. 默认情况下在找到第一张不在可见区域的图片时停止循环. 图片被认为是流式分布的, 图片在页面中的次序和 HTML 代码中次序相同. 但是在一些布局中, 这样的假设是不成立的. 不过你可以通过 failurelimit 选项来控制加载行为.
$("img").lazyload({
failurelimit : 10
});
原文地址:http://www.cnblogs.com/wenbo/archive/2011/07/15/2107579.html
[转载]jQuery.lazyload详解 - 图片延时加载的更多相关文章
- jquery.lazyload.js实现图片懒加载
个人理解:将需要延迟加载的图片的src属性全部设置为一张相同尽可能小(目的是尽可能的少占宽带,节省流量,由于缓存机制,当浏览器加载了一张图片之后,相同的图片就会在缓存中拿,不会重新到服务器上拿)的图片 ...
- jquery.lazyload.js-v1.9.1延时加载插件,已兼容ie6和各大浏览器
来源:http://www.jq22.com/jquery-info390 使用前要求: img的设置: 1.class要配上“lazy”: 2.用data-original代替src: 3.如果想要 ...
- 图片延时加载jquery.inview.js用法详解
我们在网站上总能见到这样的效果,若是有图片,图片都是先用loading加载一小段时间,然后紧接着出来要显示的图片,即效果如下: v2_loading.gif,几秒钟时间过渡到v2_pic_01_s.j ...
- 图片延时加载原理 和 使用jquery实现的一个图片延迟加载插件(含图片延迟加载原理)
图片加载技术分为:图片预加载和图片延时加载. javascript图片预加载和延时加载的区别主要体现在图片传输到客户端的时机上,都是为了提升用户体验的,延时加载又叫懒加载.两种技术的本质:两者的行为是 ...
- 基于jquery响应式网站图片无限加载瀑布流布局
分享一款效果非常酷的jQuery瀑布流布局无限加载图片效果.整个页面采用响应式布局,图片采用jQuery.Lazyload延时加载技术,提升整个页面的加载速度.效果图如下: 在线预览 源码下载 实 ...
- picLazyLoad 图片延时加载,包含背景图片
/** * picLazyLoad 图片延时加载,包含背景图片 * $(img).picLazyLoad({...}) * data-original 预加载图片地址 * alon */ ;(func ...
- jQuery.lazyload详解
<SCRIPT src="jquery.js" type=text/javascript></SCRIPT> <SCRIPT src="jq ...
- jQuery.lazyload详解(转)
转自:http://www.cnblogs.com/wenbo/archive/2011/07/15/2107579.html <script type="text/javascrip ...
- 【前端分享】jQuery.lazyload详解(转)
jQuery实现图片延迟加载,不知道是否可以节省带宽呢?有人知道吗?这究竟只是一个视觉特效还是真的能延迟加载减少服务器的请求呢? <script type="text/javascri ...
随机推荐
- Ehcache(2.9.x) - API Developer Guide, Cache Usage Patterns
There are several common access patterns when using a cache. Ehcache supports the following patterns ...
- sql常识-top
TOP 子句 TOP 子句用于规定要返回的记录的数目. 对于拥有数千条记录的大型表来说,TOP 子句是非常有用的. 注释:并非所有的数据库系统都支持 TOP 子句. SQL Server 的语法: S ...
- 2013年7月28日web前端学习笔记-------head相关标签应用
7月份快过完了.趁周日写写学过觉得有用的东西. 1.缩略图的展示问题,不要以为缩略图设置了width,height,就是缩略图了.比如一个300kb的500*500原始图片,用户请求web服务器后,展 ...
- 常用经典SQL语句大全(技巧)
三.技巧 1.1=1,1=2的使用,在SQL语句组合时用的较多 “where 1=1” 是表示选择全部 “where 1=2”全部不选, 如: if @strWhere !='' begin s ...
- 微软的技术态度 -- 从其对于CRT的设计考虑说起
很多人从C语言学习过来的人都知道,在编写程序时用到的像printf这样的函数,是作为该语言标准库函数提供的,这也是C语言标准中规定的内容.因此,操作系统必须对其保持一定程度上的透明,也就是说,作为一个 ...
- 第八篇、微信小程序-progress组件
主要属性: 效果图: ml: <View > <!--百分比是30,并在进度条右侧显示百分比--> <Text class="text-style"& ...
- C++转到C#历程零基础知识(持续增加)
1.命名空间.类和源文件的关系:几个源文件用同一个命名空间时候,那么这几个源文件中的各个类之间的调用时可行的.他不会根据你的源文件分离而分开,因为最终编译后生成的是dll,这里来看你的几个源文件是没有 ...
- (转)理解SQL SERVER中的分区表
简介 分区表是在SQL SERVER2005之后的版本引入的特性.这个特性允许把逻辑上的一个表在物理上分为很多部分.而对于SQL SERVER2005之前版本,所谓的分区表仅仅是分布式视图,也就是多个 ...
- jQuery实现列表自动滚动
需要在页面中一个小的区域循环滚动展示新闻(公告.活动.图片等等),并且,鼠标悬停时停止滚动并提示,离开后,继续滚动. 效果图: 上干货 html: <div id="news&q ...
- Java流的正确关闭方式
因为流是无论如何一定要关闭的,所以要写在finally里.如下: BufferedReader reader = null; try { reader = (BufferedReader) getRe ...