关于前端分页的方案

Question

各位大佬，这是小弟第一次发帖，最近项目里，做到一个相册管理的模块。现在要实现分页，自己想到的方案是通过打包相册模块的HTML代码成字符串然后通过document.getElementById('xxx').innerHTML插入到内容页中，但是这种方式需要页面重新绘制，反应很慢。各位大佬有什么好的优化方案吗？感激不尽！

Answer 1

根据返回的数据动态生成html结构。
ps:
var imgs = []; 
//ajax
 var data = ['img1','img2','img3'];//响应的数据图片的路径
 data.forEach(funvtion(item){
   imgs.push('<img src="'+item+'" />');
 });
document.getElementById('相册').innerHTML = imgs.join("");

Answer 2

$("#相册")。html("后台内容")

Answer 3

给你个思路：
前台传递 页码和记录数 可以用ajax  比如  每页展示10张照片   传递的参数 第一页就是  1
ajax  的data:{pagesize:10,pageindex:1}后台controller  接收这两个参数 
计算分页：
 select * from pics limit 0,10
查出来的数据 返回给前台的success 的data
然后将data遍历，写到你的页面即可。

Answer 4

分页我已经后台分好了，功能也实现了，主要是优化，现在是将相册路径等信息从后台传递给前台后要插入到内容页使用的方式需要重新绘制相册的DIV，所以头一次打开页面的时候很慢

Answer 5

跟我现在的方案一样的哈，，主要是优化页面加载速度不会很慢，慢只会是图片的加载。你可以用一个插件去懒加载图片。blazy.js

Answer 6

求介绍一个框架
angularjs,vuejs 都可以

Answer 7

求介绍一个框架
angularjs,vuejs 都可以这两个还没用过，去试试，谢谢啊。

Answer 8

你用的是html还是jsp，如果是jsp的话，第一次打开慢是因为要编译成sevlet

Answer 9

ajax分页啊，每次请求append到分页那里

Answer 10

Bootstrap DataTables。。按照要求定义后前端后台交互的数据配置一下就行了

Answer 11

用jqGrid做分页试试

Answer 12

用jsp的

Answer 13

用jsp的
你只是第一次打开慢的话，基本上就是jsp的问题，你在web.xml配置一下，<load-on-startup>1</load-on-startup>