首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

jquery动态加载图片数据练习代码

Posted in Javascript onAugust 04, 2011

这几天研究jquery，感受到了该库的强大，而且找到本不错的书 <<锋利的jquery>>
这里我只是随便做了下，上面是照片列表和两个按钮，单击小图片下面显示大图片，当点击按钮时可以查看下一页，上一页的图片。
思路：

1、首先建一个照片查看页面viewer.htm，简单布局，上面是小图片和两个按钮，下面是大图片。

2、建一个一般处理程序viewServer.ashx，用来处理照片查看页面的请求。

3、然后当然要用到数据库啦，包括图片的路径，描述等信息。每张小图片路径应该对应一张大图片，单击小图片时候再加载，这里我没做小图片所以都用大图片加载了。

4、数据传输使用json，建立一个加载图片的函数，当页面加载或者单击left、right按钮的时候，通过ajax加载图片，将请求图片的开始编号、结束编号传递到后台页面，

后台页面收到请求信息后，在数据库中查找所需图片信息。
效果如图：
jquery动态加载图片数据练习代码
实现代码：
viewer.htm 

<!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> 
<title>我的照片</title> 
<style type="text/css"> 
#top{width:1000px;height:100px;margin:auto;} 
#leftBtn{width: 18px; text-align: left;height: 100px; float:left; background-image: url(images/images/left.jpg);} 
#rightBtn{width: 18px; height: 100px; float:right;background-image: url(images/images/right.jpg);} 
#smallPhoto{ text-align: center; float:left;margin-left:10px;margin-right:5px; } 
#bigPhoto{width:1000px;height:600px;text-align:center;margin:auto;} 
.photo{width:100px; height:100px;cursor:pointer;} 
#bottom{width:1000px;height:50px;margin:auto;} 
</style> 
<script src="../js/jquery-1.4.2.js" type="text/javascript"></script> 
<script type="text/javascript"> 
$(function(){ 
loadPhoto(1,9);//页面加载函数,每次显示9张图片，加载时候显示1-9 
$("#count").text("1"); 
$("#leftBtn").click(function(){ 
var firstIndex=parseInt($("#smallTr :first-child image").attr("id"),10); 
if(firstIndex<=1){ //如果已经到第一页了 
return; 
} 
else{ 
var startId=firstIndex-9; 
var endId=startId+8; 
$("#count").text(startId); 
loadPhoto(startId,endId); 
} 
}); 
$("#rightBtn").click(function(){ 
var sum=$("#sum").text(); 
var lastIndex=parseInt($("#smallTr :last-child image").attr("id"),10); 
if(lastIndex>=parseInt(sum,10)){ //如果已经到最后一页了 
return; 
} 
else{ 
var startId=lastIndex+1; 
var endId=startId+8; 
$("#count").text(startId); 
loadPhoto(startId,endId); 
} 
}); 
}); 
//获取图片总数 
function getCountPhoto(){ 
$.post("viewServer.ashx",{"action":"countPhoto"},function(data,status){ 
if(status!="success"){ 
alert("图片总数加载失败！"); 
} 
else{ 
$("#sum").text(data); 
} 
}); 
}; 
//加载图片的公共函数，索引从startid到endId 
function loadPhoto(startId,endId){ 
$.post("viewServer.ashx",{"startId":startId,"endId":endId,"action":"getData"},function(data,status){ //告诉后台要哪几张图片 
if(status!="success"){ 
alert("小图片加载失败！"); 
} 
else{ 
getCountPhoto(); //获取图片总数 
$("#smallTr").empty(); 
var photos=$.parseJSON(data); //使用json传递数据，json用着就是爽啊 
for(var i=0;i<photos.length;i++){ 
var photo=photos[i]; 
var td=$("<td ><img id='"+photo.Rownum+"' class='photo' src='images/"+photo.ImageUrl+"'/></td>"); 
$("#smallTr").append(td); 
} 
$("#tmpimg").attr("src","images/"+photos[0].ImageUrl); 
} 
//为每个小图片设置mouseover和click事件 
$("#smallTr img").mouseenter(function(){ 
$(this).attr("cursor","pointer"); 
}) 
.click(function(){ 
$("#count").text($(this).attr("id")); 
$("#tmpimg").attr("src",$(this).attr("src")); 
}); 
}); 
}; 
//如果图片加载过慢，提示加载中。。。。 
$("#loading").ajaxStart(function(){ 
$(this).show(); 
}) 
.ajaxStop(function(){ 
$(this).hide(); 
}); 
</script> 
</head> 
<body style="text-align: center;"> 
<form id="form1" runat="server"> 
<div id="top" style="text-align: center"> 
<input id="leftBtn" type="button" /> 
<div id="smallPhoto"> 
<table> 
<tr id="smallTr"> 
</tr> 
</table> 
</div> 
<input id="rightBtn" type="button" /> 
</div> 
<div id="bigPhoto"> 
<span style="display:none;" id="loading">加载中.....</span> <br /> <img id="tmpimg" src="" style="position: relative; height: 600px; width: 800px;"/> 
</div> 
<br /> 
<div id="bottom"> 
共<span id="sum" style="visibility: visible;"><strong>0</strong></span>张， 当前第<span id="count" style="visibility:visible;"><strong>0</strong></span>张 
</div> 
</form> 
</body> 
</html>

viewserver.ashx: 
<%@ WebHandler Language="C#" Class="viewServer" %> 
using System; 
using System.Web; 
using System.Data.SqlClient; 
using System.Data; 
using System.Collections.Generic; 
public class viewServer : IHttpHandler 
{ 
public void ProcessRequest(HttpContext context) 
{ 
context.Response.ContentType = "text/plain"; 
string action = context.Request["action"].ToString(); 
if (action == "countPhoto") //统计共有多少图片 
{ 
string sql = "select count(*) from T_SmallPhotos"; 
DataTable dt = sqlHelper.GetTable(sql); 
int count = Convert.ToInt32(dt.Rows[0][0]); 
context.Response.Write(count.ToString()); 
} 
else if (action == "getData") //请求图片数据 
{ 
string startId = context.Request["startId"].ToString(); 
string endId = context.Request["endId"].ToString(); 
//string sqlStr = string sqlStr = "SELECT * FROM (SELECT id, [imageName], [imageUrl], [imageAlt], [notes], Row_Number() OVER (ORDER BY id) rownum FROM T_SmallPhotos) t WHERE t .rownum >= 1 AND t .rownum <=5" 
//这个查询语句有点小复杂，使用了开窗函数 
string sqlStr = "SELECT * FROM (SELECT id, [imageName], [imageUrl], [imageAlt], [notes], Row_Number() OVER (ORDER BY id) rownum FROM T_SmallPhotos) t WHERE t .rownum >= @startId AND t .rownum <= @endId"; 
//string sqlStr = "SELECT [id], [imageName], [imageUrl], [imageAlt], [notes] FROM [T_SmallPhotos] where id>1 and id<10"; 
SqlParameter[] param = new SqlParameter[] {new SqlParameter("@startId",startId), 
new SqlParameter("@endId",endId)}; 
DataTable dt = sqlHelper.GetTable(sqlStr, param); 
List<Photo> list = new List<Photo>(); 
for (int i = 0; i < dt.Rows.Count; i++) 
{ 
list.Add(new Photo(Convert.ToInt32(dt.Rows[i][0]), dt.Rows[i][1].ToString(), dt.Rows[i][2].ToString(), dt.Rows[i][3].ToString(), dt.Rows[i][4].ToString(), Convert.ToInt32(dt.Rows[i][5]))); 
} 
System.Web.Script.Serialization.JavaScriptSerializer jss = new System.Web.Script.Serialization.JavaScriptSerializer();//将数据序列化为json数据 
context.Response.Write(jss.Serialize(list)); 
} 
} 
public bool IsReusable 
{ 
get 
{ 
return false; 
} 
} 
//封装一个照片类，然后使用json传递 
public class Photo 
{ 
public Photo(int i, string name, string url, string alt, string notes, int rownum) 
{ 
id = i; 
imageName = name; 
imageUrl = url; 
imageAlt = alt; 
this.notes = notes; 
this.rownum = rownum; 
} 
private int id; //图片编号 
public int Id 
{ 
get { return id; } 
set { id = value; } 
} 
private string imageName;//图片名称 
public string ImageName 
{ 
get { return imageName; } 
set { imageName = value; } 
} 
private string imageUrl; //图片路径 
public string ImageUrl 
{ 
get { return imageUrl; } 
set { imageUrl = value; } 
} 
private string imageAlt; //图片描述 
public string ImageAlt 
{ 
get { return imageAlt; } 
set { imageAlt = value; } 
} 
private string notes; 
public string Notes 
{ 
get { return notes; } 
set { notes = value; } 
} 
private int rownum; 
public int Rownum 
{ 
get { return rownum; } 
set { rownum = value; } 
} 
} 
}

其中sqlHelper是我自定义的数据库访问类，比较简单就不贴出来了。
在实现过程中遇到一个ajax方面的问题，现在还是没搞太明白：
我的js代码中有两个请求函数，一个是获取图片总数getCountPhoto(),一个是加载图片的公共函数loadPhoto(startId,endId),我想在页面加载的时候同时调用这两个函数，分别显示出页码信息和具体图片列表， 
$(function(){ 
loadPhoto(1,9); 

getCountPhoto(); 
}

这样的话发现页面内容总是错误，经过调试发现原来两个ajax请求是交叉执行，并不是一个执行完成执行另一个的。
这就是前几天做的了。

jquery动态加载图片数据练习代码

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
仅IE9/10同时支持script元素的onload和onreadystatechange事件分析
Apr 27 Javascript
JavaScript中instanceof与typeof运算符的用法及区别详细解析
Nov 19 Javascript
EasyUI，点击开启编辑框，并且编辑框获得焦点的方法
Mar 01 Javascript
js游戏人物上下左右跑步效果代码分享
Aug 28 Javascript
jQuery validate验证插件使用详解
May 11 Javascript
Angular中使用ui router实现系统权限控制及开发遇到问题
Sep 23 Javascript
JS+Canvas实现的俄罗斯方块游戏完整实例
Dec 12 Javascript
node.js+jQuery实现用户登录注册AJAX交互
Apr 28 jQuery
node.js实现微信JS-API封装接口的示例代码
Sep 06 Javascript
Vue不能检测到Object/Array更新的情况的解决
Jun 26 Javascript
浅析JS中回调函数及用法
Jul 25 Javascript
使用vue中的混入mixin优化表单验证插件问题
Jul 02 Javascript
jquery里的正则表达式说明
Aug 03 #Javascript
基于jQuery的图片剪切插件
Aug 03 #Javascript
jQuery + Flex 通过拖拽方式动态改变图片的代码
Aug 03 #Javascript
JavaScript 一道字符串分解的题目
Aug 03 #Javascript
JavaScript中去掉数组中的重复值的实现方法
Aug 03 #Javascript
JavaScript 大数据相加的问题
Aug 03 #Javascript
推荐11款jQuery开发的复选框和单选框美化插件
Aug 02 #Javascript
Vite(1) 数据备份(2) hook(1) dict(1) Foreign Key(1) expdp(1) 热力图(1) 脚本(1) 字符画(1) 外键约束(1)
You might like
全国FM电台频率大全 - 17 湖北省
2020/03/11 无线电
世界收音机发展史
2021/03/01 无线电
PHP 增加了对 .ZIP 文件的读取功能
2006/10/09 PHP
PHP中is_dir()函数使用指南
2015/05/08 PHP
WordPress中查询文章的循环Loop结构及用法分析
2015/12/17 PHP
Symfony生成二维码的方法
2016/02/04 PHP
php json相关函数用法示例
2017/03/28 PHP
实例讲解PHP中使用命名空间
2019/01/27 PHP
Aster vs KG BO3 第二场2.19
2021/03/10 DOTA
js技巧--转义符&quot;\&quot;的妙用
2007/01/09 Javascript
IE8 中使用加速器(Activities)
2010/05/14 Javascript
parseInt parseFloat js字符串转换数字
2010/08/01 Javascript
鼠标移到导航当前位置的LI变色处于选中状态
2013/08/23 Javascript
jquery实现html页面 div 假分页有原理有代码
2014/09/06 Javascript
深入探究JavaScript中for循环的效率问题及相关优化
2016/03/13 Javascript
Javascript 事件冒泡机制详细介绍
2016/10/10 Javascript
js代码实现下拉菜单【推荐】
2016/12/15 Javascript
Vue2.x中的父子组件相互通信的实现方法
2017/05/02 Javascript
Vue中添加滚动事件设置的方法详解
2020/09/14 Javascript
python实现定时同步本机与北京时间的方法
2015/03/24 Python
python命令行解析之parse_known_args(）函数和parse_args()使用区别介绍
2018/01/24 Python
pandas 数据结构之Series的使用方法
2019/06/21 Python
Python 调用 Outlook 发送邮件过程解析
2019/08/08 Python
使用Django搭建web服务器的例子(最最正确的方式)
2019/08/29 Python
手机使用python操作图片文件(pydroid3)过程详解
2019/09/25 Python
python处理excel绘制雷达图
2019/10/18 Python
Python 数据的累加与统计的示例代码
2020/08/03 Python
pandas处理csv文件的方法步骤
2020/10/16 Python
C面试题
2015/10/08 面试题
车间操作工岗位职责
2013/12/19 职场文书
2014党员干部四风问题对照检查材料思想汇报
2014/09/24 职场文书
私用公车造成事故检讨书
2014/11/16 职场文书
一个都不能少观后感
2015/06/04 职场文书
2015年中秋节主持词
2015/07/30 职场文书
利用python进行数据加载
2021/06/20 Python
Python基础 括号()[]{}的详解
2021/11/07 Python