Django+ajax实现页面底部加载
来源:互联网 发布:it资讯 编辑:程序博客网 时间:2024/06/08 08:43
- 需求:展示图片,当滚动条拖到页面底部时加载一部分图画。
- 问题:photo的展示使用的是django的QuerySet,对于ajax如何加载非常头痛,还专门补了一下js。
- 解决思路:用的取巧的办法,把photo先分页,然后ajax的load方法加载下一个页面的photo部分到当前页面来。
分页
第一步是把photo的QuerySet分页展示,我这里直接用127.0.0.1:8000/x/的url,所以在urls.py里这样写
- 1
- 1
每页加载的数量改了好几次,最后决定少一点,定在5,那么需要根据page来分割QuerySet取得相对应的图片,然而QuerySet是无法排序的,先用list转换成列表,然后再切片。
views.py
- 1
- 2
- 3
- 4
- 5
- 6
- 1
- 2
- 3
- 4
- 5
- 6
这样每页展示的图片就只有5张。
底部加载
一般当页面滑动到底部进行操作的代码结构类似这样:
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
写到这里我又停下来再理了一下思路,要获得下一个页面的图片,首先要知道下一页的url,而这个加载本身是发生在主页,也就是没有/x/这个部分,又要分情况处理了。
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 1
- 2
- 3
- 4
- 5
- 6
- 7
并且在不断往下拖动过程中需要一个循环自加页码的步骤。
接下来用ajax的load方法获取对应的div,但是load方法必须要加载到一个容器里,于是乎还要先创建一个容器来装新加载的,如果直接加载到原来的div里面会覆盖之前的photo了。
所有photo的装在一个大容器中
- 1
- 2
- 3
- 4
- 1
- 2
- 3
- 4
在block里面是每一个小的photo div
- 1
- 2
- 3
- 1
- 2
- 3
为了避免每一次加载覆盖之前的内容,每一次都需要创建一个容器,并且用唯一标示与其他的容器区分开。
因此在js里面这样写:
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
每一次下滑拖到底部时,页码都会自加1,这样就避免了只能加载下一页的情况,新创建的div同样有class=’Container-fluid grid’,和前面的保持样式一致,另外增加一个id=new+页码,使用load方法加载到这个新的容器中。
至此整个加载过程基本实现。
阅读全文
0 0
- Django+ajax实现页面底部加载
- Django+ajax实现页面底部加载
- Flask: Ajax 设置Access-Control-Allow-Origin实现跨域访问;Ajax页面底部自动加载
- 滑轮滚动到页面底部ajax加载数据配合json实现
- jquery滚动页面底部时ajax加载多次解决办法
- js 下拉底部加载|滑轮滚动到页面底部ajax加载数据的实例
- Ajax实现页面加载等待
- Ajax实现页面加载等待
- ajax实现页面加载进度条显示
- django 用jquery ajax提交form 实现刷新部分页面
- Jquery滚动到页面底部自动Ajax加载图文列表,类似图片懒加载效果,带加载效果
- jQuery 判断滚动条是否到了页面底部(ajax加载数据)
- Ajax页面看到才加载,实现按需加载
- javscript实现滚动条滚动到页面底部自动加载增加页面内容
- django+js+ajax刷新页面
- ajax实现异步加载页面,实现信息实时更新
- ajax 加载页面
- ajax加载页面
- 在vue项目中前端生成二维码应该注意的问题
- 1017. A除以B (20)
- jdbc基础
- MySQL数据库开发规范
- python_大智慧SAR指标编写
- Django+ajax实现页面底部加载
- uC/OS-III之任务调度总结
- R与统计
- 服务架构演进过程
- 编译openGL遇到的问题记录和解决20170524-1
- And Then There Was One (约瑟夫环(裸0.0))
- Java中堆内存(heap)和栈内存(stack)的区别
- RocketMQ最佳实践(四)可视化管理控制台rocketmq-console-ng
- 在Android Studio中指定import的先后顺序