滚动动态加载插件lazyload

xudongcsharp

浏览: 476994 次
性别:
来自: 上海

最近访客更多访客>>

fbswz1111

chenmo80125

jelly25176

Cadelle

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

JQuery
JavaScript

插件官网：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>

分享到：

Apache [warn] (OS 64)指定的网络名不再可 ... | 关于myeclipse3.6安装svn1.6插件

2012-04-09 16:01
浏览 1738
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

滚动动态加载插件lazyload

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

滚动动态加载插件lazyload

评论

发表评论

相关推荐

jQuery密码强度插件

jquery 跨域提交数据

实现select多选插件

javascript转义字符串（Escape Sequence）处理

jQuery插件 AjaxFileUpload 异步上传

按钮禁用 启用控制

页面实现Lazy Loading效果,类似于微博

Jquery评级星型插件

为什么要进行服务器端验证？

json

JavaScript中的setTimeout和setInterval的区别

JQuery获取表单元素的值

标签云效果

jquery插件之jplayer

JavaScript优化

jQuery通过$.browser来判断浏览器

jquery validate

jQuery过滤选择器

javascript禁止链接<a>跳转

包含iframe子页面的父窗口跳转

最近访客更多访客>>

按钮禁用启用控制