关于前端分页的方案

sheraw 2017-07-05 10:04:52
各位大佬,这是小弟第一次发帖,最近项目里,做到一个相册管理的模块。现在要实现分页,自己想到的方案是通过打包相册模块的HTML代码成字符串然后通过document.getElementById('xxx').innerHTML插入到内容页中,但是这种方式需要页面重新绘制,反应很慢。各位大佬有什么好的优化方案吗?感激不尽!
...全文
863 19 打赏 收藏 转发到动态 举报
写回复
用AI写文章
19 条回复
切换为时间正序
请发表友善的回复…
发表回复
z896709283 2017-07-28
  • 打赏
  • 举报
回复
引用 18 楼 sheraw 的回复:
[quote=引用 14 楼 z896709283 的回复:] 你用的是html还是jsp,如果是jsp的话,第一次打开慢是因为要编译成sevlet
用jsp的[/quote] 你只是第一次打开慢的话,基本上就是jsp的问题,你在web.xml配置一下,<load-on-startup>1</load-on-startup>
sheraw 2017-07-21
  • 打赏
  • 举报
回复
引用 14 楼 z896709283 的回复:
你用的是html还是jsp,如果是jsp的话,第一次打开慢是因为要编译成sevlet
用jsp的
Freefish1994 2017-07-20
  • 打赏
  • 举报
回复
用jqGrid做分页试试
微瞰技术 2017-07-19
  • 打赏
  • 举报
回复
Bootstrap DataTables。。按照要求定义后前端后台交互的数据配置一下就行了
k10509806 2017-07-19
  • 打赏
  • 举报
回复
ajax分页啊,每次请求append到分页那里
z896709283 2017-07-19
  • 打赏
  • 举报
回复
你用的是html还是jsp,如果是jsp的话,第一次打开慢是因为要编译成sevlet
sheraw 2017-07-19
  • 打赏
  • 举报
回复
引用 12 楼 hanpoyangtitan 的回复:
[quote=引用 10 楼 sheraw 的回复:] [quote=引用 7 楼 hanpoyangtitan 的回复:] 用个前端的框架,不要自己写了。
求介绍一个框架[/quote] angularjs,vuejs 都可以[/quote] 这两个还没用过,去试试,谢谢啊。
sheraw 2017-07-18
  • 打赏
  • 举报
回复
引用 7 楼 hanpoyangtitan 的回复:
用个前端的框架,不要自己写了。
求介绍一个框架
什么都不能 2017-07-18
  • 打赏
  • 举报
回复
引用 10 楼 sheraw 的回复:
[quote=引用 7 楼 hanpoyangtitan 的回复:] 用个前端的框架,不要自己写了。
求介绍一个框架[/quote] angularjs,vuejs 都可以
sheraw 2017-07-18
  • 打赏
  • 举报
回复
引用 9 楼 luqilina 的回复:
66666666666666
77777777777777
luqilina 2017-07-07
  • 打赏
  • 举报
回复
66666666666666
jio可 2017-07-07
  • 打赏
  • 举报
回复
引用 6 楼 sheraw 的回复:
[quote=引用 1 楼 u012418098 的回复:] 根据返回的数据动态生成html结构。 ps: var imgs = []; //ajax var data = ['img1','img2','img3'];//响应的数据图片的路径 data.forEach(funvtion(item){ imgs.push('<img src="'+item+'" />'); }); document.getElementById('相册').innerHTML = imgs.join("");
跟我现在的方案一样的哈,,主要是优化页面加载速度[/quote] 不会很慢,慢只会是图片的加载。你可以用一个插件去懒加载图片。blazy.js
什么都不能 2017-07-06
  • 打赏
  • 举报
回复
用个前端的框架,不要自己写了。
sheraw 2017-07-06
  • 打赏
  • 举报
回复
引用 1 楼 u012418098 的回复:
根据返回的数据动态生成html结构。 ps: var imgs = []; //ajax var data = ['img1','img2','img3'];//响应的数据图片的路径 data.forEach(funvtion(item){ imgs.push('<img src="'+item+'" />'); }); document.getElementById('相册').innerHTML = imgs.join("");
跟我现在的方案一样的哈,,主要是优化页面加载速度
sheraw 2017-07-06
  • 打赏
  • 举报
回复
引用 2 楼 u012943783 的回复:
$("#相册")。html("后台内容")
跟我现在的方案是一样的哈 但是我觉得太慢了,(ˇˍˇ) 想要一个优化方案
sheraw 2017-07-06
  • 打赏
  • 举报
回复
引用 3 楼 happybebe 的回复:
给你个思路: 前台传递 页码和记录数 可以用ajax 比如 每页展示10张照片 传递的参数 第一页就是 1 ajax 的data:{pagesize:10,pageindex:1} 后台controller 接收这两个参数 计算分页: select * from pics limit 0,10 查出来的数据 返回给前台的success 的data 然后将data遍历,写到你的页面即可。
分页我已经后台分好了,功能也实现了,主要是优化,现在是将相册路径等信息从后台传递给前台后要插入到内容页使用的方式需要重新绘制相册的DIV,所以头一次打开页面的时候很慢
  • 打赏
  • 举报
回复
给你个思路: 前台传递 页码和记录数 可以用ajax 比如 每页展示10张照片 传递的参数 第一页就是 1 ajax 的data:{pagesize:10,pageindex:1} 后台controller 接收这两个参数 计算分页: select * from pics limit 0,10 查出来的数据 返回给前台的success 的data 然后将data遍历,写到你的页面即可。
jio可 2017-07-05
  • 打赏
  • 举报
回复
根据返回的数据动态生成html结构。 ps: var imgs = []; //ajax var data = ['img1','img2','img3'];//响应的数据图片的路径 data.forEach(funvtion(item){ imgs.push('<img src="'+item+'" />'); }); document.getElementById('相册').innerHTML = imgs.join("");
拘谨的小人 2017-07-05
  • 打赏
  • 举报
回复
$("#相册")。html("后台内容")

81,090

社区成员

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

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