网站前端ajax翻页插件记录

news/2024/5/20 8:40:28/文章来源:https://blog.csdn.net/weixin_30883271/article/details/96261613

网站前端ajax翻页插件记录

背景:写了个Django项目,但是在部署到服务器第一次打开网站前端首页的时候,加载速度超慢,主要集中在图片加载浪费时间,而此时我的前端很多部分还没有填充图片,

     所以想写个ajax,做到异步处理,让首页内容根据用户滚动条上下滑动加载部分信息。

Google了下看有没有轮子,首先看到的是infinite-ajax-scroll前端插件,之后找到了infinite-scroll这个插件,两种插件试了下,效果都差不多,这里简单记录下:

两者都是基于jQuery,实现翻页信息加载。商业使用需要付费。

我的网页上的结构:

1 <div class="entry-content">
2     <div class="goods_type"></div>
3     <div class="page_pagination">
4         <a href="" class="next"></a>
5     </div>
6 </div>

目的:在div.entry-content中根据a.next里面的href,按顺序加载div.goods_type

一、infinite-ajax-scroll:

  GitHub地址:https://github.com/webcreate/infinite-ajax-scroll

  使用前,需要先引入:

      <script type="text/javascript" src="./js/jquery/jquery.min.js"></script>

      <script type="text/javascript" src="./js/jquery-ias.min.js"></script>

      直接上我的例子:

  

    container:表示你想要无限ajax加载标签的上一级父标签;

  item:表示你想要ajax加载的标签;

  pagination:表示下一页的标签在什么位置;

  next:具体指向链接a;

  negativeMargin:表示在下一个div滚动到可视区域前开始加载1500像素的内容;

  还有其他参数,可以查看官方文档:https://infiniteajaxscroll.com/docs/overview.html

 

  前端在script中这样处理,后台需要将首页的相关信息,分页处理,每次ajax请求便返回一页的信息内容

 

二、infinite-scroll:

  GitHub地址:https://github.com/metafizzy/infinite-scroll

  使用前,先引入:

      <script type="text/javascript" src="./js/jquery/jquery.min.js"></script>

      <script type="text/javascript" src="./js/infinite-scroll.pkgd.min.js"></script>

  还是按照上面的HTML结构来处理:

  

  图片中的代码算是最简单的使用方法了,还有其他设置参数,可以在GitHub上进行查看

  这次处理完,试着滑动,很流畅。

  不过有个缺点,该插件会改变浏览器上的URL,将ajax请求的URL显示出来了

 

不足:这两个轮子,用起来好用,但是有点不足,我的前端模板套用了开源模板,其中使用了slick.js和slick.css这两个插件进行图片排序处理,

     使用过程中发现,slick对图片所在标签进行了动态添加class以及其他参数处理,对于ajax加载的后续相关模块标签,没有进行影响,

   奈何JavaScript学的不精,不清楚怎么处理这个。

 

转载于:https://www.cnblogs.com/lambs/p/9383633.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.luyixian.cn/news_show_829747.aspx

如若内容造成侵权/违法违规/事实不符,请联系dt猫网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

这4个基本常识小窍门 做网站的你必须了解

互联网时代&#xff0c;长点基本网建知识和小窍门&#xff0c;是必须的。所谓知己知彼,方能百战不殆。今天&#xff0c;誉哥为大家GET点新技能。 第一步&#xff1a;域名注册。 域名又叫网址&#xff0c;有了域名不代表有网站&#xff0c;域名只是门牌号&#xff0c;无论用.COM…

PCB 使用第3方网站做为外链图片资源

计划将Web版SI9000阻抗计算工具放外网了,由于个人网站带宽太小原因, 准备将静态的图片资源放在第三方网站&#xff0c;今天找了好几个图床网站&#xff0c;把阻抗模型图上传到图床网站,这样一来就能解决带宽的问题了,今天折腾了老半天了,测试结果不是想要的效果,还是把阻抗模型…

电商网站模板_商城网站开发:开展在线业务要考虑什么

随着电子商务的快速发展&#xff0c;很多企业开始重视电商网站开发&#xff0c;想要做一个自己的电商网站&#xff0c;以便从互联网吸引客户&#xff0c;增加订单&#xff0c;扩大企业影响力。但是现在各种电商网站这么多&#xff0c;该如何制作网站&#xff0c;才能发挥它的作…

服务器性能差用cdn有用吗,CDN加速有用吗?对网站有什么好处?

随着网站的访问量增加的同时&#xff0c;网站访问速度也会越来越慢&#xff0c;带宽费也会花费很多&#xff0c;特别是现在的云主机&#xff0c;都是按照M计费的&#xff0c;而且5M以后就会很贵&#xff0c;对于一些人来说是无法承受的&#xff0c;因此&#xff0c;CDN加速服务…

网站地图生成器_6个让人震惊的网站,每一个都堪称神器!

今天给大家分享6个神仙网站&#xff0c;每一个都堪称神器&#xff0c;每一个都可以帮助你打开新世界的大门&#xff0c;让你震惊&#xff0c;所以一定要看到最后哦~1.PhotoMosh推荐理由&#xff1a;抖音风图片制作PHOTOMOSH​photomosh.com如果你想制作抖音风格的照片或者gif&a…

百度搜狗SEO快速排名模拟点击工具-提升关键词排名

模拟关键字排名点击工具是运用全国的模拟IP来点击搜索引擎关键字&#xff0c;和真实的点击无异&#xff0c;避免搜索引擎发现&#xff0c;现在很多快速排名的网站&#xff0c;都只有这样一款工具来接单&#xff0c;实现快速排名&#xff0c;它的原理是通过搜索这个关键字&#…

百度关键词快排虚拟发包程序-SEO快速排名系统

至2018上半年&#xff0c;随着搜索引擎&#xff08;BD&#xff09;算法的赓续优化和更新&#xff0c;数据发包刺激用户体验数据提拔的方法对词排名的结果逐步变小&#xff0c;我们想要获得更好的结果&#xff0c;照旧得从源头网站域名&#xff0c;布局&#xff0c;外链&#xf…

小旋风SEO蜘蛛池站群-手机企业版泛站群蜘蛛池

一、蜘蛛池是什么意思 简单来说&#xff0c;蜘蛛池就是一种通过利用大型平台权重来获得百度收录以及排名的一种程序。 所谓蜘蛛池&#xff0c;指的是做大量泛站让搜索引擎收录&#xff0c;作为自己的外链资源。 当有新的网站或新的页面时&#xff0c;把新URL放入到这些泛站资…

966SEO学习网:没有蜘蛛监控如何分析搜索引擎蜘蛛抓取量

以宝塔面板为例&#xff1a; 1、登录宝塔WEB面板&#xff0c;找到如下位置 2、点击下载.log结尾的日志文件&#xff0c;点右边的下载&#xff0c;下载到本地 3、利用软件对日志进行分析&#xff08;就可以看到具体蜘蛛抓取频次等&#xff09; 软件推荐光年日志分析 4、在线…

环状序列(Circular Sequence, ACM/ICPC Seoul 2004, UVa1584)

长度为n的环状串有n种表示法&#xff0c;分别为从某 个位置开始顺时针得到。例如&#xff0c;图3-4的环状串 有10种表示&#xff1a; CGAGTCAGCT&#xff0c;GAGTCAGCTC&#xff0c;AGTCAGCTCG等。 在这些表示法中&#xff0c;字典序最小的称 为"最小表示"。 输入一个…

企业网站制作之头部制作(一)

企业网站综合布局实战笔记 思路&#xff1a; 利用了两个盒子嵌套&#xff0c;一个ul嵌套3个li即可。 具体思路&#xff1a; 先创建外层次top盒子<div class"top">再创建内层top_content盒子 <div class"top_content">后面创建ul&#xff0c;…

企业外贸网站制作的要求及注意事项

随着经济全球化的发展&#xff0c;现在有很多的中国企业都已经开展了对外贸易业务&#xff0c;进行外贸的时候最为基础的就是要求是建立企业网站。如何为外贸企业建立一个良好的网站呢&#xff1f;今天小编就来和大家介绍下外贸网站制作的要求和一些注意事项。 企业外贸网站制作…

企业网站焦点图制作

企业网站焦点图制作 用的是myfocus这个插件。 注意点&#xff1a; 焦点图初始化的ID&#xff0c;与图片列表最外层的ID一致。图片列表外面&#xff0c;包裹一个class为pic的div。 具体思路 做轮播图的时候&#xff0c;记住&#xff0c;外面一个大盒子 <div class"…

企业网站制作之新闻中心制作

企业网站制作之新闻中心制作 新闻中心制作 效果图&#xff1a; 思路&#xff1a; 很简单&#xff0c;不说了。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> &…

企业网站侧边栏制作

企业网站侧边栏制作 思路&#xff1a; 分为两大块&#xff0c;一块是上面的视频&#xff0c;和下面的图片。 具体思路&#xff1a; 先创建 <div class"sidebar">装侧边栏侧边栏上面<div class"video"> 下面 <div class"sidebar_ad&q…

大型网站架构演变和知识体系

之前也有一些介绍大型网站架构演变的文章&#xff0c;例如LiveJournal的、ebay的&#xff0c;都是非常值得参考的&#xff0c;不过感觉他们讲的更多的是每次演变的结果&#xff0c;而没有很详细的讲为什么需要做这样的演变&#xff0c;再加上近来感觉有不少同学都很难明白为什么…

网站热图生成工具--ClickHeat 本地测试应用

PS&#xff1a;原创文章&#xff0c;如需转载&#xff0c;请注明出处&#xff0c;谢谢&#xff01; 本文地址&#xff1a;http://flyer0126.iteye.com/blog/1597848 ClickHeat 是一个很酷的 JavaScript 库&#xff0c;它可以帮你统计一个页面上用户点击的热度分布图&am…

ajax网页分析,50行代码轻松爬取微博!(Ajax网站分析)

常常我们在抓取分析网页时会发现源码和在浏览器中看到的网页不一样&#xff0c;甚至通过requests抓取到的寥寥几十行代码在浏览器中所看到的却是绚丽多彩的网页。是不是网页偏爱浏览器&#xff0c;通过浏览器访问会给他更多数据…..当然不是!这是JavaScript渲染的结果。而有一种…

win10服务器创建网站,win10创建本地web服务器地址

win10创建本地web服务器地址 内容精选换一换通过SmartKit工具可以对Atlas 500 智能小站进行快速批量配置。对Atlas 500 智能小站 1.0.7.SPC100之前版本&#xff0c;SmartKit不支持自动发现设备&#xff0c;只能通过IPSN(序列号)或者IPMAC地址发现设备。PC机和待操作的Atlas 500…

linux删除目录tmpab是什么意思_【黑帽SEO科普】泛内页、泛目录是什么意思?

回归黑帽SEO科普系列。你到源码站去搜&#xff0c;发现一堆“泛XX”的代码&#xff0c;其中以“泛内页、泛目录”居多&#xff0c;那这是个什么东西&#xff1f;看各种程序的介绍&#xff0c;非常niubility的样子。但站在小白的视角看来&#xff0c;依旧搞不懂是什么东西。正常…