- 浏览: 92769 次
- 性别:
- 来自: 上海
文章分类
最新评论
-
yeyu712:
感谢分享,脑塞了很久
document.getElementById("searchForm").submit is not a function -
liuweihug:
jquery瀑布流插件Wookmark完整使用demo - h ...
jQuery实现的瀑布流效果, 向下滚动即时加载内容
Lazy Load, 延迟加载图片的 jQuery 插件
- 博客分类:
- Jquery
- Javascript
Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片 . 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预加载的处理方式正好是相反的.
在包含很多大图片长页面中延迟加载图片可以加快页面加载速度. 浏览器将会在加载可见图片之后即进入就绪状态. 在某些情况下还可以帮助降低服务器负担.
怎样使用?
Lazy Load 依赖于 jQuery
. 请将下列代码加入页面 head
区域:
<script src="jquery.js" type="text/javascript"></script> <script src="jquery.lazyload.js" type="text/javascript"></script>
并且在你的执行代码中加入下面语句:
$("img.lazy").lazyload();
这将使 class="lazy" 区域下的图片将被延迟加载.
设置敏感度:
插件提供了 threshold
选项, 可以通过设置临界值 (触发加载处到图片的距离) 来控制图片的加载. 默认值为 0 (到达图片边界的时候加载).
$("img.lazy").lazyload({ threshold : 200 });
将临界值定为 200, 当可视区域离图片还有 200 个象素的时候开始加载图片.
占位图片:
你还可以设定一个占位图片并定义事件来触发加载动作. 这时需要为占位图片设定一个 URL 地址. 透明, 灰色和白色的 1x1 象素的图片已经包含在插件里面.
$("img").lazyload({ placeholder : "img/grey.gif" });
事件触发加载:
事件可以是任何 jQuery 时间, 如: click
和 mouseover
. 你还可以使用自定义的事件, 如: sporty
和 foobar
. 默认情况下处于等待状态, 直到用户滚动到窗口上图片所在位置. 在灰色占位图片被点击之前阻止加载图片, 你可以这样做:
$("img").lazyload({ placeholder : "img/grey.gif", event : "click" });
使用特效:
当图片完全加载的时候, 插件默认地使用 show()方法来将图显示出来. 其实你可以使用任何你想用的特效来处理。
$("img").lazyload({ placeholder : "img/grey.gif", effect : "fadeIn" });
图片在容器里面:
你可以将插件用在可滚动容器的图片上, 例如带滚动条的 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 });
将 failurelimit
设为 10 令插件找到 10 个不在可见区域的图片是才停止搜索. 如果你有一个猥琐的布局, 请把这个参数设高一点.
延迟加载图片:
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); });
下载插件
发表评论
-
外部javascript引用非.js文件
2013-10-30 21:18 631按照惯例,外部Javascript文件带有.js扩展名。 但 ... -
js中cookie的使用详细分析
2013-01-08 10:30 191JavaScript中的另一个机制 ... -
一个javascript获取顶级域名的算法
2013-01-08 10:28 271/** * Router - 路由管理 * By W ... -
关于document.compatMode的一些介绍
2012-12-03 22:59 1563对于document.compatMode ,很多朋友可能跟 ... -
用javascript getComputedStyle获取和设置style的原理
2012-10-30 10:35 5474DOM标准引入了覆盖样式表的概念,当我们用document.g ... -
网页 HTML table 导出成 excel
2012-10-25 10:34 611需要在 HTML 的声明里加上 excel 的命名空间 然后 ... -
JSON数据格式基本讲解(转)
2012-10-19 10:07 479在异步应用程序中发送和接收信息时,可以选择以纯文本和 XM ... -
Lazy Load(1.7.0)中文文档 -- 延迟加载图片的jQuery插件
2012-10-19 09:46 988原文的链接在:http://www.appelsiini.ne ... -
jquery实现的年月日三级联动
2012-09-27 14:29 4077<html xmlns="http://www ... -
一个正则表达式,只含有汉字、数字、字母、下划线不能以下划线开头和结尾:
2012-09-26 13:45 29751、一个正则表达式,只含有汉字、数字、字母、下划线不能以下划线 ... -
js去掉字符串前后空格的五种方法
2012-09-25 13:58 1622第一种:循环检查替换 //供使用者调用 funct ... -
Js获取当前页面URL的一些属性
2012-09-07 15:40 209设置或获取对象指定的文件名或路径:window.locatio ... -
js数组 sort方法的分析
2012-09-03 23:45 212原帖地址:http://blog.csdn.net/pre ... -
忽略IE6/7的jquery返回到顶页
2012-08-11 15:13 238<a href="#" id ... -
jQuery JSONP 跨域实践(php)
2012-08-06 10:04 3635jquery jsonp php实例 远程服务器上的php文 ... -
带参数的JS脚本文件
2012-08-01 17:05 984假如请求:main.js?path=root&tm=1 ... -
如果浏览器禁用javascript应该怎么办?
2012-08-01 15:20 207使用<noscript>提示: <nosc ... -
jQuery实现的瀑布流效果, 向下滚动即时加载内容
2012-08-01 12:38 20463下拉滚动条或鼠标滚 ... -
js压缩工具JSMin的用法
2012-07-30 13:43 323http://www.2cto.com/uploadfile/ ... -
谷歌 offsetWidth获取值失常和scrollTop为0
2012-07-05 11:29 156今天在做一个项目中碰到了一个很奇怪的问题就是通过offsetW ...
相关推荐
图片延迟加载,可以增加用户体验,jQuery图片延迟加载插件jQuery.lazyload,使用延迟加载在可提高网页下载速度。在某些情况下,它也能帮助减轻服务器负载。
jQuery图片延迟加载插件jQuery.lazyload,使用延迟加载在可提高网页下载速度。在某些情况下,它也能帮助减轻服务器负载。演示地址http://www.jq22.com/jquery-info390
你必须修改 HTML 代码. 在 src 属性中设置展位符图片, demo 页面使用 1x1 像素灰色 GIF 图片.... 这里可以定义特定的 class 以获得需要延迟加载的图片对象. 通过这种方法你可以简单地控制插件绑定.
使用jquery 进行图片延迟加载,区别于jquery插件的lazyload。按需加载。
什么是LazyLoad技术? 在页面上图片比较多的时候,打开一张页面必然引起与服务器大数据量的交互。尤其是对于高清晰的图片,占了几百K的空间。Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长...
本文翻译自 Lazy Load Plugin for jQuery, 介绍一个 jQuery 插件, 它提供懒汉式加载页面图片的功能.
该资源包含lazyload.js、jquery2.1、还有个小Demo可供参考
jquery_lazyload:延迟加载图片的jQuery插件
jQuery图片延迟加载插件Lazy Load,在网页上出现大量图片的时候,一下加载全部图片需要加载比较长的时间,懒加载的目的就是减少加载时间,按需加载从而达到提升用户体验的目的。
Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预加载的处理方式正好是相反的. 在包含很多...
怎么实现ImageLazyLoad 一、使用JQuery插件 ,插件名: jquery.lazyload(7kb大小),压缩后(3kb大小) 在线压缩js http://closure-compiler.appspot.com/home 虽然是很牛X的特效,不过用JQuery插件只需要短短几句...
没解决方案,就得发挥咱DIY的精神,自己想法解决,分析了BUG,理了理思路,结合前段时间我做弹出窗口特效的方法,解决了Jquery.LazyLoad.js的兼容问题,现将思路和方法与大家分享一下。 解决思路大致是两点,一是...
因此掌握lazyload技术是个不错的选择,可惜jquery插件lazy load官网(http://www.appelsiini.net/projects/lazyload)称不支持新版浏览器。 lazyload在什么场合中应用比较合适? 涉及到图片,falsh资源,iframe,网页...
LazyLoad(延迟加载)技术不仅仅用在对网页中图片的延迟加载,对数据同样可以,Google Reader和Bing图片搜索就把 LazyLoad技术运用的淋漓尽致; 缺陷: 1.与Ajax技术的冲突; 2.图片的延迟加载,遇到高度特别高的...
Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预加载的处理方式正好是相反的.
lazyLoad懒加载技术应用实例,适用于图片多的网站。...这里要实现的功能:可见页面的图片是加载的,而不可见页面通过滚动条下拉可见,这也叫做“ImageLazyLoad技术”,需要用到延迟加载的jQuery插件
如果一个网页很长并且有很多图片的话,下载图片就需要很多时间,那么就会影响整个网页的加载速度,而这款延迟加载插件,会通过你的滚动情况来加载你需要看的图片,然后它才会从后台请求下载图片,最后显示出来。...
jquery Lazyload插件,用于页面的图片延迟加载等