- 浏览: 114855 次
- 性别:
- 来自: 湖南
文章分类
最新评论
-
一步一个天涯:
good.
tomcat配置热启动,我试过有用的方式 -
yuechen323:
哥们!!看了你博客的大部分文章,写的都非常的通俗易懂,谢谢~ ...
我在java中碰到的设计模式 -
悲剧了:
...
jstl
自从接触电脑开始,就迷恋了两部动漫,火影和死神,记得以前看的时候,要等图片完全加载完成才能看到,最近半年的时间,发现打开漫画的速度是越来越快了,加载的方式也发生了一些变化。 查了一下,才知道他们使用了一种新的加载技术——图片延迟加载技术,那么什么才是图片延迟加载技术(ImageLazyLoad)呢? 在页面上图片比较多的时候,打开一张页面必然引起与服务器大数据量的交互。尤其是对于高清晰的图片,占的几M的空间。ImageLazyLoad技术就是,当前可是界面的图片是加载进来的,而不可见页面(通过滚动条下拉可见)中的图片是不加载的,这样势必会引起速度上质的提升。 眼下网上使用此技术的网站有太多太多,如淘宝,还有一些动漫网站,他们都使用了这种技术。 眼下比较常用的图片延迟加载技术有四种:kissy(淘宝的JS框架),Jquery 图片延迟插件,Prototype,YUI 2。 抽时间去网上查查了,YUI的图片延迟技术是就成熟的,Jquery的图片延迟插件的设计灵感就来自于YUI的延迟技术(Lazyloader is inspired by YUI ImageLoader Utility by Matt Mlinac),闲话不说,一起来看看如何使用。 1.导入JS插件 <script src="jquery.js" type="text/javascript"></script> 2.在你的页面中加入如下的javascript: $("img").lazyload(); 这将会使所有的图片都延迟加载。 当然插件还有几个配置项可供设置。 1.改变threshold $(“img”).lazyload({ threshold : 200 }); 把阀值设置成200 意思就是当图片没有看到之前先load 200像素。 2.当然了你也可以通过设置占位符图片和自定事件来触发加载图片事件 $("img").lazyload({ 3.可以通过定义effect 参数来定义一些图片显示效果 $("img").lazyload({ LazyLoad(延迟加载)技术不仅仅用在对网页中图片的延迟加载,对数据同样可以,Google Reader和Bing图片搜索就把LazyLoad技术运用的淋漓尽致; 但做为技术而言没有十全十美的技术,缺点也是有的: 1.与Ajax技术的冲突; 2.图片的延迟加载,遇到高度特别高的图片,会出现停止加载的问题; 3.写代码不规范的朋友要注意了,不管由于什么原因,如果您的页面中,img标签的height属性未定义,那么我建议您最好不要使用ImageLazyLoad。JavaScript——延迟加载技术
文章分类:Web前端
<script src="jquery.lazyload.js" type="text/javascript"></script>
placeholder : "img/grey.gif",
event : "click"
});
placeholder : "img/grey.gif",
effect : "fadeIn"
});
发表评论
-
主题:IT工作检讨书
2010-09-16 17:44 1014由于上周请假的事情,被上级要求写一份检讨书且不少于100字,并 ... -
这里有自己收集整理的关于SVN的东西,1——SVN基本使用手册 2——Subversion 错误信息一览表.3——svn的一些常见问题
2010-08-28 09:29 1259这里我会把我自己整理的东西都贴出来,后面我还会把文档供给大家下 ... -
主题:别为大公司卖命
2010-08-28 09:27 7421.大公司最大的困扰,就是无法准确测量每个员工的贡献。它会 ... -
Javascript——悟透JavaScript
2010-08-27 16:20 967Javascript——悟透JavaS ... -
一个关于得到数字个数的问题?
2010-08-26 10:46 738一个关于得到数字个数的问题? 关键字: java应 ... -
电信拨号器
2010-08-26 10:38 935电信拨号器 关键字: 电信拨号程序、swing ... -
关于RSS的聚合---OPML
2010-08-26 10:34 1649关于RSS的聚合---OPML 关键字: rss,o ... -
hibernate集合映射inverse和cascade详解 (转载)
2010-08-26 10:31 736hibernate集合映射inverse和cascad ... -
互联网高性能系统构建思路
2010-08-26 10:30 666互联网高性能系统构 ... -
程序员修炼之七杀秘技
2010-08-26 10:30 749程序员修炼之七杀秘技 关键字: 程序员修炼、java ... -
Java多线程编程
2010-08-26 10:26 667Java多线程编程 关键 ... -
浅析Hibernate下数据批量处理方法
2010-08-26 10:25 773浅析Hibernate下数据批量处理方法 关键字: ... -
Javascript使用上的几点考虑
2010-08-26 10:24 648Javascript使用上的几点考虑 关键字: js ... -
高级程序员如何应对职场压力?
2010-08-26 10:24 686高级程序员如何应对职场压力? 关键字: 应用职场压力 ... -
认识Web网站的性能测试工具
2010-08-26 10:23 900认识Web网站的性能测试工具 关键字: web网站、 ... -
WebServices秘诀:设计SOA
2010-08-26 10:20 621WebServices秘诀:设计SOA 关键字: w ... -
XFire 入门
2010-08-26 10:20 703XFire 入门 关键字: xfire入门 【 ... -
HttpClient入门
2010-08-26 10:19 735HttpClient入门 关键字: httpclie ... -
经典算法——鸡尾酒排序(冒泡算法改良)
2010-08-26 10:12 827经典算法——鸡尾酒 ... -
封闭开发是为何?
2010-08-26 10:00 2509封闭开发是为何? 加班 ...
相关推荐
延迟加载图像意味着在网站上异步加载图像——也就是说,在网站上面的折叠内容完全加载之后,甚至仅当它们出现在浏览器的视区中时,才有条件地加载它们。这意味着,如果用户不一直向下滚动,那么放在页面底
看到一些大型网站,页面如果有很多图片的时候,当你滚动到相应的行时,当前行的图片才即时加载的,这样子的话页面在打开只加可视区域的图片,而其它隐藏的图片...js实现图片延迟加载方法一: <!DOCTYPE HTML PUBLI
10.1.5 滚动延迟属性——scrolldelay 206 10.1.6 滚动循环属性——loop 207 10.1.7 滚动范围属性——width、height 208 10.1.8 滚动背景颜色属性——bgcolor 209 10.1.9 滚动空间属性——hspace、vspace ...
无限旋转木马一个简单的、响应式的、无限的轮播,带有按需延迟加载,用于 Backbone。 这是一个非常简单的轮播脚本。 与其他轮播相比,它的健壮性和功能性要差得多,但它的方法确实为某些用例提供了几个优势。 我写这...
最初我们探索了一些类似的开源组件,但所有可用的组件都有一个共同点——它们将每个页面的数据连接起来,并将它们全部累积起来。 例如,如果第一页包含 20 个项目并且请求下一页。 数据现在包含 40 个被渲染的项目...
Boomerang就是一小段...雅虎异常性能小组列出了Boomerang可以胜任的监测工作:某个页面可感知的性能表现——考虑的是用户打开页面的那段时间动态页面性能用户带宽组件加载时间网络延迟 标签:Boomerang
输入sinject 是一个简单的 JavaScript 注入框架。 它的构建是因为循环依赖和模块加载器不能很好地协同工作,循环依赖和构造函数注入也没有。 循环依赖是否有害? 好吧,它们在某些架构中可能是代码异味。 然而,对于...
2.5 使用XML技术异步加载数据 2.5.1 IFrame 2.5.2 XMLDocument和XMLHttpRequest对象 2 5.3 向服务器发送请求 2.5.4 使用回调函数监视请求 2.5.5 完整的生命周期 2.6 Ajax有何不同 2.7 小结 2.8 资源 第3章 使AjaX...
骨干网格原型 ... 在这个原型中数据是延迟加载的——每个文件夹的内容只有在第一次打开文件夹时才会被获取。 树的组织是通过连接父/子排序键来维护的。 在原型中发现的随机数据是由 chance.js 提供的。
marionette_tree_grid 这是使用... 在这个原型中数据是延迟加载的——每个文件夹的内容只有在第一次打开文件夹时才会被获取。 树的组织是通过连接父/子排序键来维护的。 在原型中发现的随机数据是由 chance.js 提供的。
同时,还会介绍如何以不唐突的方式添加事件(甚至在页面加载完成之前)。此外,这一章还将深入更高级的主题,例如事件冒泡、委托和命名空间。 第4章介绍通过jQuery实现动画的技术,我们将学会隐藏、显示和移动页面...
SPA 风格的导航,包括顶级组件及其依赖项的延迟加载 下面详细介绍了这些功能中的每一个,下面是关于应用程序的结构和(风格)编写方式的一些一般性评论。 0. 风格和建筑 没有 JSX 目前在 Visual Studio 2013 中对 ...
延迟加载的方式) defer 和 async、动态创建 DOM 方式(创建 script,插入到 DOM 中,加载完毕后 callBack)、按需异步载入 js 3.null 和 undefined 的区别? undefined 是一个表示"无"的原始值,转为数值时为 当声明...
角化 Heroku : Bower: bower install angularise ... 入门 默认情况下, Angularise使用ng-... 当您考虑通过 AJAX 调用加载 HTML 的示例时,所有这些都特别有用——您自然应该使用 Angular.js 的方法,但在遗留系统中,
响应式图像:项目第 1 部分你的目标: 使图像适合它们在视口中的容器。 限制博客的宽度。 降低页面重量。你怎么知道你已经完成了Udacity ... (请记住,亚马逊、谷歌和其他公司的研究表明,延迟不到 0.1 秒会导致收入
响应式图像:项目第 1 部分 你的目标: 使图像适合它们在视口中的容器。 限制博客的宽度。 降低页面重量。 你怎么知道你已经完成了 ... (请记住,亚马逊、谷歌和其他公司的研究表明,延迟不到 0.1 秒会导致收入
延迟对象 延迟对象(Deferred Object,jQuery.Deferred对象)是一个可链接的(chainable)实用工具对象,实现了Promise接口,可以在回调队列中注册多个回调、调用回调队列并转发任何同步/异步函数的成败状态。...
livejournal-ips Chrome 扩展程序可在 ... 点击“加载解压后的扩展”按钮,选择下载目录——安装完成; 访问 livejournal.com 查看用户评论(在您自己的日志中)。 Geoip 信息将附加一些与网络相关的延迟。