jquery动态加载图片数据
2024-05-30 11:42:34
这几天研究jquery，感受到了该库的强大，而且找到本不错的书 <<锋利的jquery>>
这里我只是随便做了下，上面是照片列表和两个按钮，单击小图片下面显示大图片，当点击按钮时可以查看下一页，上一页的图片。
思路：
1、首先建一个照片查看页面viewer.htm，简单布局，上面是小图片和两个按钮，下面是大图片。
2、建一个一般处理程序viewServer.ashx，用来处理照片查看页面的请求。
3、然后当然要用到数据库啦，包括图片的路径，描述等信息。每张小图片路径应该对应一张大图片，单击小图片时候再加载，这里我没做小图片所以都用大图片加载了。
4、数据传输使用json，建立一个加载图片的函数，当页面加载或者单击left、right按钮的时候，通过ajax加载图片，将请求图片的开始编号、结束编号传递到后台页面，
后台页面收到请求信息后，在数据库中查找所需图片信息。
效果如图：
实现代码：
viewer.htm
View Code
<!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到endIdfunction 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:
View Code
<%@ WebHandler Language="C#" Class="viewServer"%>
using System;using System.Web;using System.Data.SqlClient;using System.Data;using System.Collections.Generic;
publicclass viewServer : IHttpHandler{
publicvoid 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());
}elseif (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)); }
}
publicbool IsReusable {get {returnfalse; } }
//封装一个照片类，然后使用json传递publicclass 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; }privateint id; //图片编号
publicint Id {get { return id; }set { id = value; } }privatestring imageName;//图片名称
publicstring ImageName {get { return imageName; }set { imageName = value; } }privatestring imageUrl; //图片路径
publicstring ImageUrl {get { return imageUrl; }set { imageUrl = value; } }privatestring imageAlt; //图片描述
publicstring ImageAlt {get { return imageAlt; }set { imageAlt = value; } }privatestring notes;
publicstring Notes {get { return notes; }set { notes = value; } }privateint rownum;
publicint Rownum {get { return rownum; }set { rownum = value; } } }}
其中sqlHelper是我自定义的数据库访问类,如下
View Code
using System;using System.Data;using System.Configuration;using System.Web;using System.Web.Security;using System.Web.UI;using System.Web.UI.WebControls;using System.Web.UI.WebControls.WebParts;using System.Web.UI.HtmlControls;using System.DirectoryServices;using System.Data.SqlClient;using System.IO;
///<summary>/// sqlHelper 的摘要说明///</summary>publicclass sqlHelper{
privatestaticstring _dbPath = Path.GetFullPath(@"..\App_Data\Photos.mdf");//private static string _conStr = @"Data Source=.\SQLEXPRESS;AttachDbFilename=" + _dbPath + ";Integrated Security=True";//private static string _conStr = @"Data Source=.\SQLEXPRESS;AttachDbFilename=|DataDirectory|\Photos.mdf;Integrated Security=True;User Instance=True";
privatestaticstring _conStr =@"Data Source=.\SQLEXPRESS;Initial Catalog=Photos;Integrated Security=True";
//private static string _conStr = @"Data Source=.\SQLEXPRESS;AttachDbFilename=" + _dbPath + ";user ID=sa;Pwd=123"; //sqlserver认证方式privatestatic SqlConnection _sqlCon =null;
public sqlHelper() {
}///<summary>/// 创建数据库连接，/// 若为创建数据库连接，先创建数据库连接并打开。/// 若数据库连接状态为关闭或者中断，先将其关闭然后打开///</summary>privatestaticvoid CreateConnection() {if (_sqlCon ==null) { _sqlCon =new SqlConnection(_conStr); _sqlCon.Open(); }elseif (_sqlCon.State == ConnectionState.Closed || _sqlCon.State == ConnectionState.Broken) { _sqlCon.Close(); _sqlCon.Open(); } }
///<summary>/// 关闭数据库连接///</summary>publicstaticvoid CloseConnection() { _sqlCon.Close(); }
///<summary>/// 获取数据库连接///</summary>///<returns></returns>publicstatic SqlConnection GetConnection() {return _sqlCon; }
///<summary>/// 执行增、删、改操作，返回影响行数，若失败返回-1///</summary>///<param name="sqlStr"></param>///<returns></returns>publicstaticint ExeNoQuery(string sqlStr) {int result =0;try { CreateConnection(); SqlCommand sqlCom =new SqlCommand(sqlStr, _sqlCon);
result = sqlCom.ExecuteNonQuery(); _sqlCon.Close();return result; }catch {return-1; } }
///<summary>/// 执行增、删、改操作，返回影响行数，若失败返回-1///</summary>///<param name="sqlStr"></param>///<returns></returns>publicstaticint ExeNoQuery(string sqlStr, params SqlParameter[] param) {int result =0;try { CreateConnection(); SqlCommand sqlCom =new SqlCommand(sqlStr, _sqlCon);
foreach (SqlParameter par in param) { sqlCom.Parameters.Add(par); }
result = sqlCom.ExecuteNonQuery(); _sqlCon.Close();return result; }catch {return-1; } }
///<summary>/// 执行查询操作，返回数据表///</summary>///<param name="sqlStr"></param>///<returns></returns>publicstatic DataTable GetTable(string sqlStr) {try { CreateConnection(); SqlDataAdapter sda =new SqlDataAdapter(sqlStr, _sqlCon); System.Data.DataSet ds =new DataSet(); sda.Fill(ds); _sqlCon.Close();return ds.Tables[0]; }catch {returnnull; } }
///<summary>/// 执行查询操作，返回数据表///</summary>///<param name="sqlStr"></param>///<returns></returns>publicstatic DataTable GetTable(string sqlStr, params SqlParameter[] param) {try { CreateConnection(); SqlDataAdapter sda =new SqlDataAdapter(sqlStr, _sqlCon);foreach (SqlParameter par in param) { sda.SelectCommand.Parameters.Add(par); } DataSet ds =new DataSet(); sda.Fill(ds); _sqlCon.Close();return ds.Tables[0]; }catch {returnnull; } }}在实现过程中遇到一个ajax方面的问题，现在还是没搞太明白：
我的js代码中有两个请求函数，一个是获取图片总数getCountPhoto(),一个是加载图片的公共函数loadPhoto(startId,endId),我想在页面加载的时候同时调用这两个函数，分别显示出页码信息和具体图片列表，
$(function(){
loadPhoto(1,9);
getCountPhoto();
}
这样的话发现页面内容总是错误，经过调试发现原来两个ajax请求是交叉执行，并不是一个执行完成执行另一个的。
这就是前几天做的了。
转载于:https://www.cnblogs.com/yinghuochong/archive/2011/08/02/2125584.html
jquery动态加载图片数据相关推荐
- jQuery页面滚动 动态加载图片等元素
相信大家见过好多随着页面滚动,动态加载图片等元素的网站,我也是,以前见了好多,只是没时间去研究,今天晚上有空,百度了一下找了一个jquery插件,作者张鑫旭,效果挺好,代码也很简单,使用更方便,废话不 ...
- jquery table ajax,JQuery Ajax动态加载Table数据的实例讲解
我们在jsp定义一个select和一个table,要求实现根据select的选值,动态加载table数据. table第一次加载数据的function定义如下: function loadData() ...
- Java实现动态加载页面_[Java教程]动态加载页面数据的小工具 javascript + jQuery （持续更新）...
[Java教程]动态加载页面数据的小工具 javascript + jQuery (持续更新) 0 2014-05-07 18:00:06 使用该控件,可以根据url,参数,加载html记录模板(包含 ...
- python requests 动态加载_Python获取网页中动态加载的数据
Python获取网页中动态加载的数据 0.XHR 是什么? XHR是 XMLHttpRequest 对象.既Ajax功能实现所依赖的对象,在JQuery中的Ajax是对 XHR的封装. 1.查看异步加 ...
- Delphi FastReport动态加载图片
Delphi FastReport动态加载图片 2011-01-06 作者:李海彬 阅读:684 以前用FastReport制作报表,从来没有打印过图片,这段时间做了个打印个人简历的 ...
- jQuery动态加载select下拉列表
需求说明: 以前使用的select下拉列表都是静态的,select 的option数据都是写死的.现在项目中的select需要根据不同的场景使用不同的数据,解决方式就是动态加载option数据. 代码 ...
- ceisum 加载geojson,使用 Cesium 动态加载 GeoJSON 数据
前言 需求是这样的,我需要在地图中显示 08 年到现在的地震情况,地震都是发生在具体的时间点的,那么问题就来了,如何实现地震情况按照时间动态渲染而不是一次全部加载出来. 一. 方案分析 这里面牵扯到两 ...
- 动态加载图片，实现瀑布流效果
瀑布流 1.瀑布流 瀑布流,可以有多列,每一列的高度可以不相同,但是宽度必须一样: 排列的方式是,从左往右排列,哪一列总高度最小,就优先排序,把图片放在这一列. 这样排完所有的图片后,可以保证每一列的 ...
- jquery 动态加载插件
jquery 动态加载插件 插件自己编写的请注意使用权限 //The MIT License (MIT)//Copyright (c) 2017 Jonny Su//Permission is her ...
最新文章
- php access 插入,如何使用PHP將附件插入Access數據庫？
- 一次MYSQL 服务器性能优化之旅
- BO QUERY BUILDER － SI_INSTANCE相关属性
- php 全局匹配,JS使用RegExp对象实现replaceall全局匹配并替换
- 聚类技术---复杂网络社团检测_基于Plato高性能图计算框架的社团发现算法
- Linux中使用tar打包解包查看的使用方法
- CentOS7配置ssh证书登录无效
- 移动端html右滑空白,BootStrap.css 在手机端滑动时右侧出现空白的原因及解决办法...
- 【效率】专为Win7系统设计的极简番茄计时器 - MiniPomodoro （附源码）
- 小D课堂-SpringBoot 2.x微信支付在线教育网站项目实战_1-1.SpringBoot整合微信支付开发在线教育视频站点介绍...
- movingpandas时空数据分析——旧金山出租车轨迹数据集处理
- Java学习网站推荐
- 正确调用腾讯x5内核详解
- 最长公共子串 动态规划
- js 香港地区 手机号效验正则
- 什么是脏读、不可重复读、幻读？ (数据库相关)
- 不想被淘汰，大咖有话说——程序猿一定要学大数据？
- [模板] 球 体积交 体积并
- Gabor滤波器详解
- 微信二次开发sdk非ipad/android协议（很好用）