`
xudongcsharp
  • 浏览: 475102 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

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

 
阅读更多
用到Jquery插件：http://imakewebthings.com/jquery-waypoints/


示例： 
<%@ 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&hellip;</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;
	}
	
	
}
分享到：
| HP 开发流程
评论
发表评论

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

相关推荐

    Lazy loading - eager loading

    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 ...

    IOS TableView Lazy Loading Demo

    当应用需要加载图片时，特别是网络图片，采用“懒加载”（Lazy Loading）策略是提高性能和节省资源的有效方式。这个“IOS TableView Lazy Loading Demo”就是演示了如何将UITableView与懒加载技术相结合，以优化用户...

    页面loading效果之一

    在网页设计中，加载效果（通常称为“页面loading效果”）是用户体验的重要组成部分。当用户访问一个网站或应用时，加载过程可能需要时间，而一个精心设计的loading动画可以缓解用户的等待焦虑，同时提升品牌形象。本...

    Lazy Loading：JavaScript懒加载实现.docx

    Lazy Loading：JavaScript懒加载实现.docx

    lazyloading.rar

    "lazyloading.rar"这个压缩包文件提供了一个实现移动端图片懒惰加载的解决方案。下面将详细解释这种技术的原理、优势、实现方式以及如何使用压缩包内的文件。 图片懒惰加载是一种优化策略，主要用于网页或应用中，...

    Lazy Loading：视频懒加载实现方法.docx

    Lazy Loading：视频懒加载实现方法.docx

    页面底端自动加载无需翻页功能 类似 新浪微博和Pinterest

    这种技术模仿了社交媒体平台如新浪微博和Pinterest的浏览体验，让用户在滚动页面时能无缝地加载更多内容，而无需点击分页按钮。这种功能大大提升了用户浏览的流畅性，减少了用户的操作负担，尤其适用于内容丰富的...

    lazyLoading.rar

    在提供的"lazyLoading.rar"压缩包中，包含了一个完整的实现图片懒加载的实例。其中，HTML5页面应该包含了使用`data-src`的`&lt;img&gt;`标签，JavaScript文件（可能是.js后缀）则包含了处理滚动事件和图片加载逻辑的代码。...

    fakeLoader页面加载前loading效果

    "fakeLoader"是一种常见的技术，用于在页面实际内容加载前提供一种加载效果，即“loading”动画。这样的加载器可以提高用户的感知速度，因为用户在看到实际内容之前，有一个视觉反馈，表明网站正在积极处理请求。...

    页面加载的Loading效果

    在本文中，我们将深入探讨如何实现页面加载的Loading效果，以及涉及到的相关技术知识点。首先，我们需要理解页面加载的过程。一般来说，网页加载分为几个阶段：HTML解析、CSS和JavaScript执行、图片和其他资源加载。...

    页面loading效果插件 for z-blog.rar

    此外，这样的加载效果还可以与其他优化策略结合，如延迟加载（lazy loading）、压缩图片和代码优化，以进一步提高页面加载速度和用户体验。 总的来说，"页面loading效果插件 for z-blog.rar" 是一个针对z-Blog用户...

    页面图片实现Lazyload 延迟加载效果

    页面图片的延迟加载，也称为懒加载（Lazy Load），是一种优化网页性能的技术。它通过只在用户滚动到图片所在位置时才加载图片，而非一次性加载所有图片，从而减少了初次加载页面所需的时间，提升了用户体验，特别是...

    高仿sina微博个人微博html网页模板源代码

    这个模板可以帮助那些希望在自己的网站上实现类似微博功能的用户，或者用于教学、学习网页设计时模仿和理解大型社交平台的界面布局和交互设计。 在这款模板中，我们可以学习到以下几个关键的网页设计和开发知识点：...

    Lazy Loading：CSS懒加载策略.docx

    Lazy Loading：CSS懒加载策略.docx

    Lazy Loading：懒加载技术概论.docx

    Lazy Loading：懒加载技术概论.docx

    Lazy Loading：懒加载与用户体验.docx

    Lazy Loading：懒加载与用户体验.docx

    Lazy Loading：懒加载与SEO优化.docx

    Lazy Loading：懒加载与SEO优化.docx

    Lazy Loading：懒加载与性能优化.docx

    Lazy Loading：懒加载与性能优化.docx

    腾讯微博分页效果

    腾讯微博的分页效果可能采用了“懒加载”（Lazy Loading）技术，即在用户滚动到页面底部时，动态加载更多内容。这种设计可以显著减少初始页面加载时间，使用户能够快速查看页面顶部的信息。 分页效果的实现通常涉及...

Magicbox
Global site tag (gtag.js) - Google Analytics