首页
所有分类
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 相关文章推荐
用于table内容排序
Jul 21 Javascript
实现png图片和png背景透明（支持多浏览器）的方法
Sep 08 Javascript
JS仿百度搜索自动提示框匹配查询功能
Nov 21 Javascript
JavaScript function 的 length 属性使用介绍
Sep 15 Javascript
简单了解JavaScript操作XPath的一些基本方法
Jun 03 Javascript
AngularJS 与Bootstrap实现表格分页实例代码
Oct 14 Javascript
浅析Jquery操作select
Dec 13 Javascript
详解基于DllPlugin和DllReferencePlugin的webpack构建优化
Jun 28 Javascript
记一次Vue.js混入mixin的使用(分权限管理页面)
Apr 17 Javascript
vue实现浏览器全屏展示功能
Nov 27 Javascript
vue 翻页组件vue-flip-page效果
Feb 05 Javascript
Ajax实现三级联动效果
Oct 05 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
Oracle面试题(81) .NET面试题(131) EJB面试题(46) LINUX面试题(83) 网络工程师面试题(96) 软件工程师面试题(40) 软件测试工程师面试题(53) Javascript面试题(44) DB面试题(126) C#面试题(90)
You might like
用PHP实现的四则运算表达式计算实现代码
2011/08/02 PHP
PHP对MongoDB[NoSQL]数据库的操作
2013/03/01 PHP
自定义min版smarty模板引擎MinSmarty.class.php文件及用法
2016/05/20 PHP
php使用PDO事务配合表格读取大量数据插入操作实现方法
2017/02/16 PHP
PHP常量define和const的区别详解
2019/05/18 PHP
Yii 使用intervention/image拓展实现图像处理功能
2019/06/22 PHP
用YUI做了个标签浏览效果
2007/02/20 Javascript
jQuery 使用手册(一)
2009/09/23 Javascript
js url传值中文乱码之解决之道
2009/11/20 Javascript
使用jQuery实现验证上传图片的格式与大小
2014/12/03 Javascript
javascript数组遍历for与for in区别详解
2014/12/04 Javascript
thinkphp 表名 大小写 窍门
2015/02/01 Javascript
JavaScript原生xmlHttp与jquery的ajax方法json数据格式实例
2015/12/04 Javascript
JavaScript接口的实现三种方式(推荐)
2016/06/14 Javascript
D3.js实现折线图的方法详解
2016/09/21 Javascript
JS中append字符串包含onclick无效传递参数失败的解决方案
2016/12/26 Javascript
JavaScript实现定时页面跳转功能示例
2017/02/14 Javascript
微信小程序如何再次获取用户授权的方法
2019/05/10 Javascript
JavaScript实现简单进度条效果
2020/03/25 Javascript
vue自定义指令和动态路由实现权限控制
2020/08/28 Javascript
vue+iview使用树形控件的具体使用
2020/11/02 Javascript
Python多线程编程（一）：threading模块综述
2015/04/05 Python
用Python进行TCP网络编程的教程
2015/04/29 Python
Python实现string字符串连接的方法总结【8种方式】
2018/07/06 Python
Windows系统下PhantomJS的安装和基本用法
2018/10/21 Python
Python依赖包整体迁移方法详解
2019/08/15 Python
利用python、tensorflow、opencv、pyqt5实现人脸实时签到系统
2019/09/25 Python
Python图像处理之膨胀与腐蚀的操作
2021/02/07 Python
Django和Ueditor自定义存储上传文件的文件名
2021/02/25 Python
移动端html5模拟长按事件的实现方法
2018/09/30 HTML / CSS
Onzie官网：美国时尚瑜伽品牌
2019/08/21 全球购物
应届生个人求职信模板
2013/11/26 职场文书
员工入职担保书范文
2014/04/01 职场文书
本科生自荐信
2014/06/18 职场文书
个人整改方案范文
2014/10/25 职场文书
工程款申请报告
2015/05/15 职场文书