- 浏览: 467312 次
- 性别:
- 来自: 上海
文章分类
- 全部博客 (288)
- Java (70)
- Web (11)
- JSP (18)
- JavaScript (25)
- JQuery (22)
- HTML (7)
- CSS (2)
- Struts2.X (6)
- Ibatis/Mybatis (6)
- Hibernate (4)
- Spring (8)
- Oracle (23)
- MySql (9)
- Apache (1)
- Tomcat (9)
- Weblogic (2)
- Maven (6)
- Flex (0)
- Junit (2)
- Test (1)
- SVN (6)
- GIS (3)
- Android (1)
- Eclipse (10)
- Thread (3)
- JVM (1)
- Cache (2)
- Design pattern (1)
- Nosql (3)
- Linux (10)
- Hudson/Jenkins (1)
- MQ (1)
- Network (2)
- 生活工作 (5)
- 架构师之路 (6)
- 知识精华荟萃 (9)
- Interview (13)
最新评论
-
276847139:
方法很有效,我的问题就在是在父项目的.classpa ...
手动添加Maven Dependencies -
coosummer:
推荐使用http://buttoncssgenerator.c ...
button css 样式 -
lqz2012:
DBFFileReader是外部框架里面的吧,不是JDK的。楼 ...
java读取dbf文件 -
xudongcsharp:
lx13345 写道java.lang.NoSuchMetho ...
Spring常用错误 -
lx13345:
jar是hibernate3.3GA,ehcache-1.5. ...
Spring常用错误
插件官网:http://www.appelsiini.net/projects/lazyload
示例代码:
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Lazy Load, jQuery 插件延迟加载图片效果演示页-scorpinz.com</title> <script type="text/javascript" src="jslib/jquery-1.7.1.js"></script> <script type="text/javascript" src="jslib/jquery.lazyload.js"></script> </head> <body> <p><img class="lazy" src="images/pixel.gif" style="background:url(images/loading.gif) no-repeat center;" data-original="http://ww2.sinaimg.cn/large/920dbc6ejw1dq9doyhvv7j.jpg" width="535"></p> <p><img class="lazy" src="images/pixel.gif" style="background:url(images/loading.gif) no-repeat center;" data-original="http://ww2.sinaimg.cn/large/920dbc6ejw1dq9dp8ewmdj.jpg" width="535"></p> <p><img class="lazy" src="images/pixel.gif" style="background:url(images/loading.gif) no-repeat center;" data-original="http://ww1.sinaimg.cn/large/920dbc6ejw1dq9dpm1wb7j.jpg" width="535"></p> <p><img class="lazy" src="images/pixel.gif" style="background:url(images/loading.gif) no-repeat center;" data-original="http://ww4.sinaimg.cn/large/920dbc6ejw1dq9dqd7jcpj.jpg" width="535"></p> <p><img class="lazy" src="images/pixel.gif" style="background:url(images/loading.gif) no-repeat center;" data-original="http://ww3.sinaimg.cn/large/920dbc6ejw1dq9dqp3ua2j.jpg" width="535"></p> <p><img class="lazy" src="images/pixel.gif" style="background:url(images/loading.gif) no-repeat center;" data-original="http://ww2.sinaimg.cn/large/920dbc6ejw1dq9dr1eof8j.jpg" width="535"></p> <p><img class="lazy" src="images/pixel.gif" style="background:url(images/loading.gif) no-repeat center;" data-original="http://ww1.sinaimg.cn/large/920dbc6ejw1dq9drddxrcj.jpg" width="535"></p> <p><img class="lazy" src="images/pixel.gif" style="background:url(images/loading.gif) no-repeat center;" data-original="http://ww2.sinaimg.cn/large/920dbc6ejw1dq9drmpi7aj.jpg" width="535"></p> <p><img class="lazy" src="images/pixel.gif" style="background:url(images/loading.gif) no-repeat center;" data-original="http://ww2.sinaimg.cn/large/920dbc6ejw1dq9drvo7kvj.jpg" width="535"></p> <p><img class="lazy" src="images/pixel.gif" style="background:url(images/loading.gif) no-repeat center;" data-original="http://ww2.sinaimg.cn/large/920dbc6ejw1dqeq30rm0sj.jpg" width="535"></p> <p><img class="lazy" src="images/pixel.gif" style="background:url(images/loading.gif) no-repeat center;" data-original="http://ww2.sinaimg.cn/large/920dbc6ejw1dqeq3o9af2j.jpg" width="535"></p> <p><img class="lazy" src="images/pixel.gif" style="background:url(images/loading.gif) no-repeat center;" data-original="http://ww2.sinaimg.cn/large/920dbc6ejw1dqeq4ezen8j.jpg" width="535"></p> <p><img class="lazy" src="images/pixel.gif" style="background:url(images/loading.gif) no-repeat center;" data-original="http://ww1.sinaimg.cn/large/920dbc6ejw1dqeq51j5cgj.jpg" width="535"></p> <p><img class="lazy" src="images/pixel.gif" style="background:url(images/loading.gif) no-repeat center;" data-original="http://ww2.sinaimg.cn/large/920dbc6ejw1dqeq6ytqyxj.jpg" width="535"></p> <p><img class="lazy" src="images/pixel.gif" style="background:url(images/loading.gif) no-repeat center;" data-original="http://ww2.sinaimg.cn/large/920dbc6ejw1dqeq6dlszmj.jpg" width="535"></p> <p><img class="lazy" src="images/pixel.gif" style="background:url(images/loading.gif) no-repeat center;" data-original="http://ww4.sinaimg.cn/large/920dbc6ejw1dqeq5pyc3tj.jpg" width="535"></p> <script type="text/javascript" charset="utf-8"> $("img.lazy").lazyload({ threshold : 200, effect : "fadeIn" }); </script> </body> </html>
发表评论
-
jQuery密码强度插件
2014-01-17 15:24 683Complexify 是一个用来检测密码强度的 jQuery ... -
jquery 跨域提交数据
2013-12-19 17:11 10751.直接用jquery中$.getJSON进行跨域提交 ... -
实现select多选插件
2013-12-04 14:40 954JQuery获取和设置Select选项 ... -
javascript转义字符串(Escape Sequence)处理
2012-12-28 11:05 1542转义字符串(Escape Sequence)也称字符实体( ... -
jQuery插件 AjaxFileUpload 异步上传
2012-12-15 14:13 842http://www.phpletter.com/Demo/ ... -
按钮禁用 启用控制
2012-12-15 13:16 916<input type="button&qu ... -
页面实现Lazy Loading效果,类似于微博
2012-12-10 17:06 2611用到Jquery插件:http://imakewebthing ... -
Jquery评级星型插件
2012-11-29 17:18 846Jquery评级星型插件 【官网】[url]http://w ... -
为什么要进行服务器端验证?
2012-08-30 16:59 1237我们通常在页面提交表单时往往在客服端进行脚本验证,但忽略了服务 ... -
json
2012-07-23 22:15 841http://www.json.org/ tool:http ... -
JavaScript中的setTimeout和setInterval的区别
2012-05-11 12:28 1064setTimeout(表达式,延时时间)在执行时,是在载入后延 ... -
JQuery获取表单元素的值
2012-02-24 11:11 1110<body> 文本框: ... -
标签云效果
2012-02-16 16:40 1036<div> <h3>标签云效果 ... -
jquery插件之jplayer
2011-12-28 11:05 951http://www.jplayer.org -
JavaScript优化
2011-11-04 14:33 899javaScript是一门解释性的语言,它不像java、C#等 ... -
jQuery通过$.browser来判断浏览器
2011-08-31 16:25 1361用jQuery来判断浏览器的 ... -
jquery validate
2011-08-29 21:44 1787http://topmanopensource.iteye.c ... -
jQuery过滤选择器
2011-08-22 23:24 1102jQuery过滤选择器主要是 ... -
javascript禁止链接<a>跳转
2011-08-22 15:26 2127有时候需要禁止链接: <a href="ja ... -
包含iframe子页面的父窗口跳转
2011-08-20 16:53 2550可以用javaScript解决 在你想控制跳转的页面,比如lo ...
相关推荐
a lightful image lazyload plugin for Vue. 轻量级滚动懒加载插件
Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预加载的处理方式正好是相反的. 在包含很多...
Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预加载的处理方式正好是相反的.
lazyload.js可以实现图片分批次加载,不是一次性加载完毕再分批次展现。使用该插件有个注意的地方,图片要加上宽高。因为默认图是1像素的,所以如果没有给图片限制宽高,当滚动条滚动时会全部加载出来。
lazyLoad懒加载技术应用实例,适用于图片多的网站。在页面上图片比较多的时候,打开一张页面必然引起与服务器大数据量的交互。尤其是对于高清晰的图片,占的几M的空间呢~。这里要实现的功能:可见页面的图片是加载的...
src接受选项Vue.use(LazyloadVue,选项)多个实例滚动面板多个滚动面板响应图像-带有srcset /大小的img标签响应图像-图片标签延迟加载视频-标记视频懒惰iframe带有v-lazy-的懒惰背景图像bg安装yarn add lazyload-...
Lazy Load 插件原理 修改目标img元素的src属性为orginal属性,从而中断图片的加载。检测滚动状态,然后把网页可视区域中的img的src属性还原然后加载图片,从而制造了一种缓冲加载的效果。代码引入方法: 代码如下:&...
MingGe.scrollLoad的开发专门针对lazyload来强爆的 MingGe.scrollLoad无论执行效率还是准确性都在lazyload之上,秒杀lazyload一条街, 首先lazyload在瀑布流页面下是执行不正确的,我提供的demo.html采用的就是...
Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预加载的处理方式正好是相反的. 在包含很多...
用户滚动到视口之外的图像之前,不会加载它们。 这与图像预加载相反。 这是原始插件的现代香草JavaScript版本。 它使用观察图像何时进入浏览器视口。 原始代码的灵感来自Matt Mlinac的实用程序。 新版本大量借用了...
怎么实现ImageLazyLoad 一、使用JQuery插件 ,插件名: jquery.lazyload(7kb大小),压缩后(3kb大小) 在线压缩js http://closure-compiler.appspot.com/home 虽然是很牛X的特效,不过用JQuery插件只需要短短几句...
2.52升级内容:加入bubblScrollLoad手动冒泡事件。container容器操作,这个功能在2.0... * MingGe.scrollLoad无论执行效率还是准确性都在lazyload之上,抱开lazyload一条街, * MingGe.scrollLoad2.52插件
Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预加载的处理方式正好是相反的. 在包含很多...
这是原始 Lazy Load 插件的现代原生 JavaScript 版本。 它使用 Intersection Observer API 来观察图像何时进入浏览器视口。 原始代码的灵感来自 Matt Mlinac 的 YUI ImageLoader 实用程序。 新版本大量借用 Dean ...
什么是LazyLoad技术? 在页面上图片比较多的时候,打开一张页面必然引起与服务器大数据量的交互。尤其是对于高清晰的图片,占了几百K的空间。Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长...
一、使用JQuery插件 ,插件名: jquery.lazyload(7kb大小),压缩后(3kb大小) 在线压缩js http://closure-compiler.appspot.com/home 虽然是很牛X的特效,不过用JQuery插件只需要短短几句代码,使用过程如下: ...
lazyload是一个用Javascript编写的jQuery插件,它可以延迟加载长页面中的图片,在浏览器可视区域外的图片将不会被载入,直到用户将它们滚动到它们所在的位置。 跟bootstrap一样,lazyload.js也是依赖于jQuery ...
角 jqLazyload! 用于 jquery 延迟加载插件的 AngularJS (Angular) 指令... script src =" jquery.lazyload.min.js " > </ script >< script src =" angular-jqLazyload.min.js " > </ script > a