- 浏览: 466490 次
- 性别:
- 来自: 上海
文章分类
- 全部博客 (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常用错误
用到Jquery插件:http://imakewebthings.com/jquery-waypoints/
示例:
处理ajax请求的servlet
示例:
<%@ 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 HTML 4.01 Transitional//EN"> <html> <head> <base href="<%=basePath%>"> <title>lazyload</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <title>Infinite Scrolling with jQuery Waypoints</title> <meta name="description" content="An example of how to build an infinite scrolling page on top of the jQuery Waypoints plugin"> <meta name="viewport" content="width=480"> <script src="jslib//modernizr.custom.js"></script> </head> <body> <div id="wrapper"> <center> <table id="container" style="border:1px solid #96C2F1; background-color: #EFF7FF; width: 300px; height: 100px; margin: 0px auto;"> <tr> <td>id</td><td>name</td> </tr> <tr> <td>2</td><td>Lucy</td> </tr> <tr> <td>3</td><td>James</td> </tr> <tr> <td>4</td><td>Gaga</td> </tr> </table> </center> <div id="footer"> </div> </div> <script src="jslib/jquery-1.7.1.js"></script> <script src="jslib/waypoints.js"></script> <script type="text/javascript"><!-- $(document).ready(function() { var $loading = $("<div class='loading'><p>Loading more items…</p></div>"), $footer = $('#footer'), opts = { offset: '100%' }; $footer.waypoint(function(event, direction) { $footer.waypoint('remove'); $('body').append($loading); //alert($('#container tr:last td:first').text()); var id=$('#container tr:last td:first').text(); $.post('lazyload', {id: id}, function(data) { if(data!=-1){ //alert("call back:"+data); var jsons = eval(data); //alert(jsons); for(i in jsons){ $('#container').append("<tr><td>"+jsons[i].id+"</td><td>"+jsons[i].name+"</td></tr>"); } //$('#container').append($data.find('.article')); //$('#container').append($data); $loading.detach(); //$('.more').replaceWith($data.find('.more')); $footer.waypoint(opts); }else{ //alert('nodata'); $loading.detach(); } }); }, opts); }); --></script> </body> </html>
处理ajax请求的servlet
import java.io.IOException; import java.io.PrintWriter; import java.sql.Connection; import java.sql.DriverManager; import java.sql.PreparedStatement; import java.sql.ResultSet; import java.util.ArrayList; import java.util.List; import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import com.hp.bean.User; public class LazyLoadAction extends HttpServlet { /** * Destruction of the servlet. <br> */ public void destroy() { super.destroy(); // Just puts "destroy" string in log // Put your code here } /** * The doGet method of the servlet. <br> * * This method is called when a form has its tag value method equals to get. * * @param request the request send by the client to the server * @param response the response send by the server to the client * @throws ServletException if an error occurred * @throws IOException if an error occurred */ public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { response.setContentType("text/html"); PrintWriter out = response.getWriter(); int id=Integer.valueOf(request.getParameter("id")); System.out.println("-----------id:"+id); List<User> list = getUserList(id, id + 30); if(list.size()>0){ StringBuilder sb=new StringBuilder(); sb.append("["); for(int i=0; i<list.size(); i++){ User u=list.get(i); sb.append("{name:'" + u.getName() + "',id:" + u.getId() + "},"); if(i==list.size()-1) sb.append("{name:'" + u.getName() + "',id:" + u.getId() + "}]"); } System.out.println(sb.toString()); out.print(sb); }else{ out.print("-1"); } out.flush(); out.close(); } /** * The doPost method of the servlet. <br> * * This method is called when a form has its tag value method equals to post. * * @param request the request send by the client to the server * @param response the response send by the server to the client * @throws ServletException if an error occurred * @throws IOException if an error occurred */ public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { doGet(request, response); } /** * Initialization of the servlet. <br> * * @throws ServletException if an error occurs */ public void init() throws ServletException { // Put your code here } public static List<User> getUserList(int start,int end){ String url="jdbc:mysql://localhost:3306/test"; String jdbcdriver="com.mysql.jdbc.Driver"; Connection con=null; List<User> list=new ArrayList<User>(); try { Class.forName(jdbcdriver); con=DriverManager.getConnection(url, "root", "root"); String sql="select * from user where id>? and id<?"; PreparedStatement pst=con.prepareStatement(sql); pst.setInt(1, start); pst.setInt(2, end); ResultSet rs=pst.executeQuery(); while(rs.next()){ User user=new User(); user.setId(rs.getInt(1)); user.setName(rs.getString(2)); list.add(user); } rs.close(); con.close(); }catch(Exception e){ e.printStackTrace(); } return list; } }
public class User { private Integer id; private String name; public Integer getId() { return id; } public void setId(Integer id) { this.id = id; } public String getName() { return name; } public void setName(String name) { this.name = name; } }
- lazyload.rar (1.6 MB)
- 下载次数: 6
- imakewebthings-jquery-waypoints-v1.1.7-0-g7a7e8d8.zip (59.2 KB)
- 下载次数: 3
发表评论
-
jQuery密码强度插件
2014-01-17 15:24 680Complexify 是一个用来检测密码强度的 jQuery ... -
jquery 跨域提交数据
2013-12-19 17:11 10691.直接用jquery中$.getJSON进行跨域提交 ... -
实现select多选插件
2013-12-04 14:40 950JQuery获取和设置Select选项 ... -
jQuery插件 AjaxFileUpload 异步上传
2012-12-15 14:13 840http://www.phpletter.com/Demo/ ... -
按钮禁用 启用控制
2012-12-15 13:16 915<input type="button&qu ... -
Jquery评级星型插件
2012-11-29 17:18 845Jquery评级星型插件 【官网】[url]http://w ... -
json
2012-07-23 22:15 835http://www.json.org/ tool:http ... -
滚动动态加载插件lazyload
2012-04-09 16:01 1697插件官网:http://www.appelsiini.net/ ... -
JQuery获取表单元素的值
2012-02-24 11:11 1107<body> 文本框: ... -
jquery插件之jplayer
2011-12-28 11:05 949http://www.jplayer.org -
jQuery通过$.browser来判断浏览器
2011-08-31 16:25 1360用jQuery来判断浏览器的 ... -
jquery validate
2011-08-29 21:44 1786http://topmanopensource.iteye.c ... -
jQuery过滤选择器
2011-08-22 23:24 1099jQuery过滤选择器主要是 ... -
Jquery实现Google自动补全效果
2011-05-31 10:39 1550HTML <html> <head> ... -
服务器端向客户端输出json
2011-05-09 14:47 15301.服务器端传送一个字符串到客户端,客户端通过eval()得到 ... -
append()方法使用出错
2011-04-29 16:02 1699今天用append方法时动态插入一个表格,在FF下是可以看到效 ... -
Ajax使用时间戳来解决IE缓冲问题
2011-04-24 17:10 2175当你的ajax需要的数据是及时更新的,也就是说在没有刷新页面的 ... -
JQuery常用积累(值得你进来!)
2011-04-21 17:08 17911.如何通过Jquery获取radio的值 如何通过Jquer ... -
解决AJAX中文乱码
2011-04-21 15:51 1217问题描述:在利用JQuery的$.get()方式url?use ... -
jquery validate
2011-01-15 01:39 1131一、准备工作 需要JQuery版本:1.2.6+, 兼容 1. ...
相关推荐
In this article I want to discuss the lazy loading mechanism provided by NHibernate. It is recommended for maximum flexibility to define all relations in your domain as lazy loadable. This is the ...
UITableView 與 Lazy Loading 結合 當cell 需要顯示照片時, 由NSURLConnect 去下載圖片.
前端代码实现图片懒加载 , 内含完整的html5页面 , js 以及图片资源 , 有兴趣的朋友可以参考一下
源码包 博文链接:https://tree-161219.iteye.com/blog/599949
移动端图片懒惰加载,直加载能看到的图片,当欢动手机屏幕新的图片才会加载,只需引入给的文件中的js和css再做一些简单的设置就能使用
懒惰的加载
Yii2 的延迟加载模块用于内容延迟加载的 Yii2 模块主要特点: 显示... 在应用程序配置文件的modules部分添加一个新模块,例如: 'modules' => [ 'lazyloading' => ['class' => 'denar90\lazyloading\LazyLoading' ,'m
图像的反延迟加载, 在任何网页上加载所有图像 - 一旦页面加载即可。 图像的反延迟加载, 在任何网页上加载所有图像 - 一旦页面加载就会。 语言:English (United States)
实现“无限滚动”网站,在您滚动时加载和呈现越来越多的内容,这样用户就不必翻阅页面。 内部使用的 :collision: :collision: :collision: 多选下拉菜单的React库。 :collision: :collision: :collision: 特征 :...
一个组件实现lazyload图片当在视窗内(或附近)时才加载
jquery_lazyload-master.zip 类似新浪微博 的图片懒加载,非常实用jquery_lazyload-master.zip 类似新浪微博 的图片懒加载,非常实用jquery_lazyload-master.zip 类似新浪微博 的图片懒加载,非常实用jquery_lazy...
Laravel开发-eloquent-log-lazy-loading 记录(或禁用)雄辩的延迟加载关系。
Lazyload图片延迟加载效果
lazy binomial heaps的oython实现,优先队列。采用双向循环链表实现,api:merge,insert,find_min,extractMin,coalesce_step,updateMin。
网上也有不少类似的效果,这个Lazyload主要特点是: 支持使用window(窗口)或元素作为容器对象; 对静态(位置大小不变)元素做了大量的优化; 支持垂直、水平或同时两个方向的延迟。 由于内容比较多,下一篇再介绍...
js lazyload实现网页图片延迟加载特效
lazyload.js可以实现图片分批次加载,不是一次性加载完毕再分批次展现。使用该插件有个注意的地方,图片要加上宽高。因为默认图是1像素的,所以如果没有给图片限制宽高,当滚动条滚动时会全部加载出来。
NULL 博文链接:https://iintothewind.iteye.com/blog/1234870
lazyload.js实现图片异步延迟加载