- 浏览: 1256022 次
- 性别:
- 来自: 常州
文章分类
- 全部博客 (499)
- java (101)
- linux (82)
- mysql (30)
- javascript (45)
- Oracle (12)
- ext (14)
- 虚拟机 (1)
- 搜索引擎 (2)
- struts2 (11)
- 设计模式 (9)
- nginx (17)
- tomcat (12)
- 随想 (10)
- spring (18)
- svn (1)
- flash (3)
- UML (1)
- 数据结构 (7)
- 算法 (2)
- 网摘 (9)
- 数据库 (15)
- ibatis (3)
- jquery (31)
- lucene (1)
- hibernate (14)
- Myeclipse (4)
- 线程 (7)
- jbpm (4)
- 重构 (1)
- mantis (3)
- MediaWiki (4)
- ExtMail (1)
- MDaemon (1)
- egit (1)
- dwr (7)
- sitemesh (2)
- mybatis (1)
- ico (1)
- hadoop (5)
- jsoup (1)
- urlrewrite (2)
- jstl (1)
- spring3 (2)
- aop (2)
- 定时器 (1)
- Quartz (2)
- apache (1)
- php (1)
- security (1)
- iptables (2)
- QQ (1)
- mysqldump (1)
- vim (1)
- memcached (4)
- jad (1)
- 微博 (1)
- html5 (1)
- css3 (1)
- httpclient (10)
- google (1)
- shortUrl (1)
- json (2)
- virtualBox (1)
- mantisBT (2)
- htmlunit (1)
- selenium (2)
- mail (1)
- 正则表达式 (4)
- html (3)
- css (2)
- jatoolsPrinter (1)
- 图片处理 (1)
- hql (1)
- webservice (1)
- 分词 (3)
- 短信 (1)
- VPS (1)
- 事务 (1)
- 广告 (1)
- 画廊 (1)
- git (3)
- github (1)
- openshift (1)
- 缓存 (1)
- web (3)
- android (3)
- c3p0 (1)
- 邮箱 (1)
- memcache (2)
- windows (2)
- js (14)
- 编辑器 (1)
- 打印 (1)
- centos (5)
- boneCP (1)
- 连接池 (1)
- sql (1)
- nosql (1)
- MongoDB (1)
- 浏览器 (1)
- node (1)
- node.js (1)
- backbone.js (1)
- lazyload (1)
- Switch Off (1)
- Titanium (1)
- 网站架构 (1)
- WebDriver (1)
- APJP (1)
- 代理 (1)
- comet (1)
- kendoui (1)
- UI (2)
- 互联网 (1)
- localStorage (1)
- 记录 (1)
- 微信 (2)
- Sphinx (1)
- netty (1)
- js,mvvm,Avalon (1)
- 安卓 (1)
- Tengine (1)
- 大数据 (1)
- 手机 (1)
- paypal (1)
- SaaS (1)
- gitlab (1)
- nodejs (1)
- React (1)
- shadowsocks (0)
- vpn (0)
- 验证码 (1)
- SSL (2)
- SEO (1)
- IntelliJ (1)
- 敏捷开发 (1)
- 项目管理 (1)
- 爬虫 (1)
- 正则 (1)
- owncloud (1)
- 云存储 (1)
- ajax (1)
- pjax (1)
- jdk (1)
- zookeeper (1)
- phantomjs (1)
- ELK (1)
- springcloud (1)
- IDEA (1)
- hexo (1)
- ss (1)
- letencrypt (1)
最新评论
-
peakandyuri:
这个是有BUG的,数字小体现不出来,数字大了就不对了,但是Ja ...
java十进制转换N进制并反转换的工具类 -
ginolai:
然后是相关配置:/etc/sysconfig/iptables ...
Linux中iptables设置详细 -
bzhao:
我测试没啥区别啊!
Thread.sleep()和Thread.currentThread().sleep()区别 -
zhl549342097:
match == false
Spring Security 3.1 中功能强大的加密工具 PasswordEncoder -
hellotieye:
renzhengzhi 写道drager 写道用jsoup后解 ...
jsoup select 选择器
在浏览有些网站时,发现图片是在下拉滚动条时才加载,这是一个很不错的用户体验。这一效果是通过JavaScript 编写的 jQuery 插件实现的,它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预加载的处理方式正好是相反的.在包含很多大图片长页面中延迟加载图片可以加快页面加载速度. 浏览器将会在加载可见图片之后即进入就绪状态. 在某些情况下还可以帮助降低服务器负担. 有些WordPress主题也具备了此功能。
目前我用的这个热点新闻主题由于有缩略图功能所以也试着加上看看效果如何。这里把这一功能应用到WordPress主题方法说一下,其实很简单,首先下载jquery.lazyloa.js,放到主题目录中,然后在header.php模板文件</head>标签前添加如下代码:
- <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
- });
下载地址: source, minified or packed
发表评论
-
jQuery Deferred模块详解
2015-08-26 14:02 999jQuer 1.5版本引入Deferred功能, 为处理事件 ... -
jquery的异步方式实现(deferred)
2015-08-26 13:37 805转自作者文章: http:/ ... -
基于jquery的前端mobile UI
2014-06-10 11:34 1007http://jquerymobile.com/ -
图片延迟加载插件jquery.lazyload.js之BUG处理[转]
2013-12-18 22:30 5040经常在一些网站上见到图片都是在窗口上将要出现的时候才进行 ... -
jQuery jBox弹出窗口插件
2013-10-29 11:09 7156jBox是一款基于jQuery的弹出窗口插件,jBox可以实 ... -
Jquery套打工具测试版
2013-09-29 09:29 1071记录一下,以便查看进度: http://www.iteye ... -
jquery之ajaxfileupload异步上传插件【转】
2013-08-15 20:21 1014点我下载工程代码 由于项目需求,在处理文件上传时需要使用 ... -
流体(瀑布流)布局插件:Waterfall
2013-08-08 11:48 2136Waterfall是jQuery流体布局插件 当前版本: ... -
[转]可以直接拿来用的15个jQuery代码片段
2013-07-23 16:34 1015jQuery里提供了许多创建交互式网站的方法,在开发Web ... -
jquery阻止冒泡事件方法
2013-07-17 13:36 1198jQuery是一个快捷简便的JavaScript框架,说道框架 ... -
jquery瀑布流插件masonry
2013-07-12 09:47 940http://masonry.desandro.com/ -
jquery实用广告画廊效果插件-PikaChoose
2013-01-25 00:28 1434PikaChoose是一个超轻量级的图片画廊jQuery插 ... -
jquery取页面全部节点
2013-01-05 21:25 892<html> <head> ... -
jQuery停止动画和判断是否处于动画状态
2012-12-30 18:59 9508停止元素的动画方法:stop() 语法结构:stop ... -
jQuery MiniUI-强大的企业级WEB控件库
2012-09-21 12:54 1881快速入门:http://blog.51cto.com/zt/3 ... -
jquery滚动保持定位层
2012-09-19 14:21 1399本插件借鉴了一些网上的资料,实际运用可以自行修改。 /*! ... -
jquery条形码生成插件
2012-09-12 20:40 1115http://barcode-coder.com/en/bar ... -
jquery的checked与其版本的关联
2012-03-22 19:51 1015<html> <head> ... -
jquery控制文本框输入数字变化后做操作
2012-02-20 01:15 17631.最简单方式绑定onkeyup事件 2.jQuery.fn ... -
jquery滚动公告效果
2012-02-12 21:44 3665http://wange.im/jquery-slidesho ...
相关推荐
:图片延迟加载技术能够加快页面下载速度,减轻服务器的负荷,提高用户体验。图片延迟加载技术在各种js框架都 得到一定程度的实现。本文详细介绍了通过使用jQuery框架实现图片延迟加载功能。
jQuery lazyLoad.js插件 是一款基于jquery框架,可以“实现”图片延迟加载的插件
超实用的jQuery代码段精选近350个jQuery代码段,涵盖页面开发中绝大多数要点、技巧与方法,堪称史上最实用的jQuery代码参考书,可以视为网页设计与网站建设人员的好帮手。《超实用的jQuery代码段》的代码跨平台、跨...
通常开发者会通过JQuery、Knockout、Underscore...在这篇文章里,我将解释 RequireJS框架如何帮助应用开发者写出更加模块化的代码,以及它是如何通过延迟加载JavaScript文件来提高应用性能的。 开始的部分我们先不用R
通常开发者会通过JQuery、Knockout、Underscore...在这篇文章里,我将解释RequireJS框架如何帮助应用开发者写出更加模块化的代码,以及它是如何通过延迟加载JavaScript文件来提高应用性能的。 开始的部分我们先不用R
前端项目-jquery.lazyloadxt,Lazy Load XT是一个面向移动的、快速可扩展的jquery插件,用于延迟加载图像、视频和其他媒体,内置jquery mobile框架支持。它通过只加载可见的媒体元素来提高网站的性能,折叠下的元素在...
##Purpose 轻量级 jQuery Mobile MVC-ish 延迟加载库。 使项目创建快速简便。 延迟加载控制器和视图。 模型留给开发人员。 辅助方法提供快速简便的 UI 功能。 ####Notes 这并不是一个包罗万象的框架(它只有 300...
要等到页面全部加载完毕才执行,注意是全部加载,包括dom,图片等其它资源。 而$(document).ready(function(){ alert("hello"); });(1) 当dom加载完就可以执行了。 代码1同时做到表现和逻辑分离。并且可以在...
H-ui.admin是用H-ui前端框架开发的轻量级网站后台模版 ...│ Echo.js 图片延迟加载插件 │ colpick.js 颜色插件 │ handlebars.js js模版引擎 │ waterfall.min.js 瀑布流插件 └─temp 测试数据、图片
pjscrape是一个框架,适用于任何想要使用 Javascript 和进行网页抓取的命令行工具的人。 专为构建,它允许您从命令行在完全呈现、启用 Javascript 的上下文中抓取页面,无需浏览器。 依赖关系 特征 客户端、基于 ...
Power PWChecker 是一个用来确保用户输入了安全... JavaScript图像延迟加载库Echo.js386 Echo 是一个独立的 JavaScript 懒加载图像的工具,快速、体积小(不足1k)和使用 HTML5 的 data- 属性。Echo 支持 IE8 。 ...
延迟加载 XT jQuery 插件面向移动、快速且可扩展的 jQuery 插件,用于延迟加载图像/视频,内置 jQueryMobile 框架支持。 目前已在 IE 6-11、Chrome 1-31、Firefox 1.5-27.0、Safari 3-7、Opera 10.6-18.0、iOS 5-7、...
该项目是一个二手书交易网站,提供二手书上架、交易、评价等功能,分为买家前台、卖家前台、管理后台三部分。买家前台提供二手书查询、购买下单等功能;...8. 数据库读写分离、图片延迟加载等技术使用 该项目实现了一个二
根目录 ...) ...│ robots.txt 搜索引擎爬虫配置文件 ...│ Echo.js 图片延迟加载插件 │ colpick.js 颜色插件 │ handlebars.js js模版引擎 │ waterfall.min.js 瀑布流插件 └─temp 测试数据、图片
Webiness广泛使用延迟加载技术,因此,在大多数情况下,它比其他框架要快。 它可以用于Web应用程序的快速原型制作。 Webiness与jQuery集成在一起,它具有一组支持AJAX的功能以及他自己的用于前端开发的轻量级CSS...
延迟加载图像 暗模式 本地搜寻 集成 存档页面模板 完全本机JavaScript,不使用jQuery或任何其他框架 没有CSS框架,请保持简洁和最小化 正确裁剪的缩略图 小节支持 要求 必须使用Hugo≥0.78.0 。 如果要执行以下...
RhoConnect.js 积极使用来自 jQuery API 的延迟/承诺对象。 所有异步结果都作为返回的promise对象的done(..)方法调用的参数值返回。 入门 加载 rhoconnect.js 库: <html> <head> <script type=...
移动框架这是用于移动框架分配的 Web 端对于此作业,您将使用 HTML、CSS 和 Javascript 构建自己的应用程序框架。 构建一个包含三个屏幕的 HTML 文件。 无需 jQuery 即可构建此应用程序。 处理 300ms 延迟,以支持旧...