首页
所有分类
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 相关文章推荐
用javascript实现给图片加链接
Aug 15 Javascript
JS对img标签进行优化使用onerror显示默认图像
Apr 24 Javascript
js实现图片和链接文字同步切换特效的方法
Feb 20 Javascript
JS实现横向与竖向两个选项卡Tab联动的方法
Sep 27 Javascript
jquery 抽奖小程序实现代码
Oct 12 Javascript
详解vue事件对象、冒泡、阻止默认行为
Mar 20 Javascript
提高Node.js性能的应用技巧分享
Aug 10 Javascript
Vue实现固定定位图标滑动隐藏效果
May 30 Javascript
微信小程序中悬浮窗功能的实现代码
Aug 02 Javascript
javascript合并两个数组最简单的实现方法
Sep 14 Javascript
Layer组件多个iframe弹出层打开与关闭及参数传递的方法
Sep 25 Javascript
vue 动态生成拓扑图的示例
Jan 03 Vue.js
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
逻辑架构(1) 事务(5) 缓存(3) 锁(1) 弱口令(1) 性能优化(3) ipv6(1) 策略(1) 内存(1) 连接数(1)
You might like
编写php应用程序实现摘要式身份验证的方法详解
2013/06/08 PHP
PHP处理SQL脚本文件导入到MySQL的代码实例
2014/03/17 PHP
Yii 快速，安全，专业的PHP框架
2014/09/03 PHP
php函数serialize()与unserialize()用法实例
2014/11/06 PHP
php 批量查询搜狗sogou代码分享
2015/05/17 PHP
浅析PHP中的i++与++i的区别及效率
2016/06/15 PHP
thinkPHP自定义类实现方法详解
2016/11/30 PHP
php输出图像的方法实例分析
2017/02/16 PHP
Thinkphp 5.0实现微信企业付款到零钱
2018/09/30 PHP
HTML5附件拖拽上传drop &amp; google.gears实现代码
2011/04/28 Javascript
document.getElementBy(&quot;id&quot;)与$(&quot;#id&quot;)有什么区别
2013/09/22 Javascript
JQuery插件fancybox无法在弹出层使用左右键的解决办法
2013/12/25 Javascript
JS之Date对象和获取系统当前时间详解
2014/01/13 Javascript
获取select元素被选中的文本内容的js代码
2014/01/29 Javascript
浅谈jQuery中 wrap() wrapAll() 与 wrapInner()的差异
2014/11/12 Javascript
jQuery中cookie插件用法实例分析
2015/12/04 Javascript
js实现音频控制进度条功能
2017/04/01 Javascript
AngularJS集合数据遍历显示的实例
2017/12/27 Javascript
深入浅析Node环境和浏览器的区别
2018/08/14 Javascript
Python 字符串操作实现代码(截取/替换/查找/分割)
2013/06/08 Python
Python3.x版本中新的字符串格式化方法
2015/04/24 Python
快速了解Python开发中的cookie及简单代码示例
2018/01/17 Python
Python运维之获取系统CPU信息的实现方法
2018/06/11 Python
python制作填词游戏步骤详解
2019/05/05 Python
django 类视图的使用方法详解
2019/07/24 Python
python RC4加密操作示例【测试可用】
2019/09/26 Python
python3+opencv生成不规则黑白mask实例
2020/02/19 Python
keras分类之二分类实例(Cat and dog)
2020/07/09 Python
Python多分支if语句的使用
2020/09/03 Python
OpenCV灰度化之后图片为绿色的解决
2020/12/01 Python
英国综合网上购物商城：The Hut
2018/07/03 全球购物
电子商务专业实习生自我鉴定
2013/09/24 职场文书
党员干部2014全国两会学习心得体会
2014/03/10 职场文书
中学生旷课检讨书2篇
2014/10/09 职场文书
教师工作总结范文2014
2014/11/10 职场文书
Vue3.0写自定义指令的简单步骤记录
2021/06/27 Vue.js