JSP中滑动滚动条到底加载更多图片怎么实现,各位大神棒棒忙!

qweaz2012 2013-10-20 06:48:33
JSP中滑动滚动条到底从mysql数据库中加载更多图片怎么实现?在网上也看了一些代码,但是都不是很懂,希望大神们贴出详细代码给个注释啊...ps:每行显示4张图片,每张图片下面有个超链接。
...全文
474 8 打赏 收藏 转发到动态 举报
写回复
用AI写文章
8 条回复
切换为时间正序
请发表友善的回复…
发表回复
tth121935193 2014-04-11
  • 打赏
  • 举报
回复
楼主可以把你实现的代码发给我吗!QQ752079807
lirenniao 2013-10-22
  • 打赏
  • 举报
回复
后台需要把数据库数据(图片)分页,前台发送请求的页数,,得到数据,加载到页面;;;
阿鱼 2013-10-22
  • 打赏
  • 举报
回复
引用 3 楼 qweaz2012 的回复:
[quote=引用 楼主 qweaz2012 的回复:] JSP中滑动滚动条到底从mysql数据库中加载更多图片怎么实现?在网上也看了一些代码,但是都不是很懂,希望大神们贴出详细代码给个注释啊...ps:每行显示4张图片,每张图片下面有个超链接。
思路我也知道问下ajax怎样从数据库中获得数据返回到前台呢?[/quote] 异步请求要靠ajax和后台页面的相互配合才能得到数据:ajax负责发出请求到后台页面===>>后台页面接收到请求后从数据库取出数据并将数据处理成一定的格式(常见如json,xml),然后把一定格式的数据传给ajax的回调函数===>>回调函数接收到数据后便进行读取处理。 比如你想加载图片: 1.先用ajax发送请求,比如用get请求:www.xxx.com/img.php?amount=10; 2.请求发出后,后台img.php页面接受到请求并得到请求参数amount,然后就从数据库取出十条数据,并生成一定格式,如json:

[
	{
		"imgSrc": "http://www.xxx.com/img/1.jpg", 
		"title": "标题1",
		"describe": "描述1"
	},
	{
		"imgSrc": "http://www.xxx.com/img/2.jpg",  
		"title": "标题2",
		"describe": "描述2"
	},
        ......//依次共十条数据
]
3.img.php自动将json返给ajax的回调,回调函数就可以用数据中的imgSrc属性生成img插入到html中。
qweaz2012 2013-10-22
  • 打赏
  • 举报
回复
[quote=引用 5 楼 qwklove 的回复:] 已经搞定了,不过没用json,xml,时间很紧,没时间学,用的是比较笨的方法将数据拼接成字符串再传给前台解析的,不过还是很感谢!
Go 旅城通票 2013-10-21
  • 打赏
  • 举报
回复
找Infinite Scrolling这个jquery插件
qweaz2012 2013-10-21
  • 打赏
  • 举报
回复
引用 楼主 qweaz2012 的回复:
JSP中滑动滚动条到底从mysql数据库中加载更多图片怎么实现?在网上也看了一些代码,但是都不是很懂,希望大神们贴出详细代码给个注释啊...ps:每行显示4张图片,每张图片下面有个超链接。
思路我也知道问下ajax怎样从数据库中获得数据返回到前台呢?
似梦飞花 2013-10-20
  • 打赏
  • 举报
回复
<!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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <script type="text/javascript"> function createImages(arr){ var fragment=document.createDocumentFragment(); for(var i=0;i<arr.length;i++){ var img=new Image(); img.src=arr[i]; fragment.appendChild(img); fragment.appendChild(document.createElement("br")); } document.body.appendChild(fragment); } function getWindowHeight(){ var de=document.documentElement; return window.innerHeight||(de&&de.clientHeight)||document.body.clientHeight; } window.onscroll=function(){ var scrollTop=document.documentElement.scrollTop||document.body.scrollTop; var scrollHeight=document.documentElement.scrollHeight||document.body.scrollHeight; var windowHeight=getWindowHeight(); if(scrollTop+windowHeight==scrollHeight){ createImages(['460.gif']) } } </script> </head> <body> <img src="1.jpg"><br/> <img src="2.jpg"><br/> <img src="1.jpg"><br/> </body> </html> 类似这样试试
似梦飞花 2013-10-20
  • 打赏
  • 举报
回复
检测window.onscroll事件 当scrollTop=scrollHeight的时候ajax从后台取数据 append到页面上试试

87,901

社区成员

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧