如何实现页面滚动到下面再加载

最新推荐文章于 2024-10-07 19:43:01 发布
最新推荐文章于 2024-10-07 19:43:01 发布
阅读量1.6k 收藏
点赞数 1
分类专栏： jQuery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_37290635/article/details/56486831
版权

<!DOCTYPE html >
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script type="text/javascript" src="jquery-1.11.0.min.js"></script>
</head>
<body>
<div id="table">
<table width="100%" border="0" cellpadding="10" cellspacing="10">
<tr>
            <td align="center">
                <img class="scrollLoading" src="http://b165.photo.store.qq.com/psb?/V13v84Oi2WYALI/cMMUWiWTF9ddGY8j7Oissu52y4urvIMC5kmJnWq1qAU!/b/dKUAAAAAAAAA&bo=7ADcAAAAAAADBxI!&rf=viewer_4" width="300" height="120"  />
            </td>
        </tr>
            <tr>
            <td align="center">
                <img class="scrollLoading" src="http://b165.photo.store.qq.com/psb?/V13v84Oi2WYALI/cMMUWiWTF9ddGY8j7Oissu52y4urvIMC5kmJnWq1qAU!/b/dKUAAAAAAAAA&bo=7ADcAAAAAAADBxI!&rf=viewer_4" width="300" height="120"  />
            </td>
        </tr>
            <tr>
            <td align="center">
                <img class="scrollLoading" src="http://b165.photo.store.qq.com/psb?/V13v84Oi2WYALI/cMMUWiWTF9ddGY8j7Oissu52y4urvIMC5kmJnWq1qAU!/b/dKUAAAAAAAAA&bo=7ADcAAAAAAADBxI!&rf=viewer_4" width="300" height="120"  />
            </td>
        </tr>
            <tr>
            <td align="center">
                <img class="scrollLoading" src="http://b165.photo.store.qq.com/psb?/V13v84Oi2WYALI/cMMUWiWTF9ddGY8j7Oissu52y4urvIMC5kmJnWq1qAU!/b/dKUAAAAAAAAA&bo=7ADcAAAAAAADBxI!&rf=viewer_4" width="300" height="120"  />
            </td>
        </tr>
            <tr>
            <td align="center">
                <img class="scrollLoading" src="http://b165.photo.store.qq.com/psb?/V13v84Oi2WYALI/cMMUWiWTF9ddGY8j7Oissu52y4urvIMC5kmJnWq1qAU!/b/dKUAAAAAAAAA&bo=7ADcAAAAAAADBxI!&rf=viewer_4" width="300" height="120"  />
            </td>
        </tr>
            <tr>
            <td align="center">
                <img class="scrollLoading" src="http://b165.photo.store.qq.com/psb?/V13v84Oi2WYALI/cMMUWiWTF9ddGY8j7Oissu52y4urvIMC5kmJnWq1qAU!/b/dKUAAAAAAAAA&bo=7ADcAAAAAAADBxI!&rf=viewer_4" width="300" height="120"  />
            </td>
        </tr>
            <tr>
            <td align="center">
                <img class="scrollLoading" src="http://b165.photo.store.qq.com/psb?/V13v84Oi2WYALI/cMMUWiWTF9ddGY8j7Oissu52y4urvIMC5kmJnWq1qAU!/b/dKUAAAAAAAAA&bo=7ADcAAAAAAADBxI!&rf=viewer_4" width="300" height="120"  />
            </td>
        </tr>
            <tr>
            <td align="center">
                <img class="scrollLoading" src="http://b165.photo.store.qq.com/psb?/V13v84Oi2WYALI/cMMUWiWTF9ddGY8j7Oissu52y4urvIMC5kmJnWq1qAU!/b/dKUAAAAAAAAA&bo=7ADcAAAAAAADBxI!&rf=viewer_4" width="300" height="120"  />
            </td>
        </tr>
</table>
</div>
<div id="txt"></div>
<script type="text/javascript">
$(function(){
$(window).scroll(function(){
    var documentTop = $(document).scrollTop();
    var windowHeight = $(window).height();
    var documentHeight = $(document).height();
    //当 documentTop >= (documentHeight-windowHeight) 说明滚动条已经滚动到底部了
    if(documentTop >= (documentHeight-windowHeight)){
        var tableTxt = $("#table").html();
        $("#txt").append("<hr>" + tableTxt);
    }
})
})    
</script>
</body>
</html>

技术空间
关注
专栏目录
前端页面实现滚动加载数据的案例
u011431550的专栏
01-22 8608
实现滚动加载内容
实现滚动加载
qq_46177396的博客
03-02 302
滚动顶部+页面高度 >= 滚动高度 $(window).scroll(function() { var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; var scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight; var clientHeight = document.docu
html页面滑动页面加载更多
curtain的专栏
05-26 4077
/** * 页面信息后加载 * @type {boolean} */ var isTrue = true; var pageLoad = 2; window.addEventListener("scroll",lazyLoad); function lazyLoad() { var winHeight =documen
前端react&vue3——实现滚动到底加载数据
最新发布
编程知识分享，主打前端
10-07 3101
大家好，我是yma16，本文分享 前端react&vue3——实现滚动加载（到底部加载）scrollTop 属性一个双精度浮点值，表示元素当前从原点垂直滚动的像素数，其中正值表示元素向下滚动（以显示更多底部的内容）。如果元素根本没有向上或向下滚动，则 scrollTop 为 0。如果文档不是活动文档，则返回值为 0。如果文档在亚像素精度设备上呈现，则返回的值也是亚像素精度的，可能包含小数部分。clientHeight 属性。
移动端无限滚动加载 js实现原理
cc的博客
06-04 8710
由于网页的执行都是单线程的，在JS执行的过程中，页面会呈现阻塞状态。因此，如果JS处理的数据量过大，过程复杂，可能会造成页面的卡顿。传统的数据展现都以分页的形式，但是分页的效果并不好，需要用户手动点击下一页，才能看到更多的内容。有很多网站使用无限分页的模式，即网页视窗到达内容底部就自动加载下一部分的内容...
Vue中如何进行滚动加载与无限滚动
stormjun的博客
10-03 4789
Vue.js提供了强大的工具和技术，使滚动加载和无限滚动的实现变得相对简单。通过示例代码和本文提供的指南，您可以轻松入门并在Vue项目中实现这一令人印象深刻的用户体验功能。希望这篇文章对您有所帮助，如果您有任何问题，请随时向我们提问。
Table表格、列表 滚动加载实现
weixin_42333548的博客
05-09 3619
方案一：给table起一个className，监听当前table下的.ant-table-body元素的滚动(推荐) 主要实现逻辑： 1、在table外包一个div，添加滚动事件onScrollCapture 2、给table起一个类名，目的是为了获取table下ant-table-body的元素：let element = document.querySelectorAll(`.tableRect .ant-table-body`)[0] 3、判断依据 element.scr
基于JQuery实现滚动到页面底端时自动加载更多信息
10-26
总的来说，实现基于JQuery的滚动加载功能主要涉及到滚动事件监听、页面高度计算、异步请求以及DOM操作。通过这样的方式，我们可以创建一个动态、流畅的浏览体验，使得用户能够连续地阅读和探索内容，而无需频繁点击...
原生Js页面滚动延迟加载图片实现原理及过程
10-27
实现页面滚动延迟加载图片的过程，不仅优化了页面的加载性能，减少了初始加载时间，同时降低了服务器的负载，提高了用户体验。以上技术知识点是实现该功能的核心内容。在实际应用中，开发者还可以结合懒加载库（如...
jQuery实现当拉动滚动条到底部加载数据的方法分析
10-17
在Web开发中，实现当用户滚动到页面底部时自动加载更多数据是一种常见的需求，这可以用于无限滚动的页面，提高用户体验。使用jQuery实现这一功能已经是一种成熟的方案，下面将详细解析这一过程涉及的知识点。 1. ...
vue进入页面时滚动条始终在底部代码实例
10-17
总结起来，Vue中实现页面加载时滚动条始终在底部，可以通过直接操作DOM元素的`scrollTop`属性或利用第三方库如`better-scroll`。同时，自定义滚动条样式可以提供更好的用户体验。注意，这种方法适用于静态内容，若...
JavaScript实现无穷滚动加载数据
10-19
在Web开发中，为了提高用户体验，常常需要实现一种连续加载数据而不刷新页面的技术，即所谓的“无穷滚动”(Infinite Scrolling)。这种技术常见于瀑布流布局的页面中，允许用户通过滚动来查看更多数据内容，而无需...
大量数据html页面表格滚动显示
03-08
可从后台写循环获取上万数据，赋值到js全局变量，每次滚动显示所需分页数据，不会一次性显示大数据量导致页面滚动卡死，从ag-grid控件中获取想法，该文件可参考，ag-grid利用css3不兼容ie8，已换成别的想法支持
瀑布流，实现页面滚动到位置再加载
weixin_42666092的博客
04-06 272
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>瀑布流</title> <style type="text/css"> * { margin: 0; padding: 0; } ul, li { list-style-type: none; } .wp { overflow: hidden;
Vue向下滚动加载更多数据-scroll-案例
JackieDYH的博客
08-09 5583
vue-infinite-scroll 安装 npm install vue-infinite-scroll --save 尽管官方也推荐了几种载入方式，但“最vue”的方式肯定是在main.js中加入 import infiniteScroll from 'vue-infinite-scroll' Vue.use(infiniteScroll) 实现范例 官方给的代码范例是假设你在根组件写代码，实际上我们肯定是在子组件里写代码，所以代码也需要略作修改，下方只列有用的代码片段：
js控制页面滑动加载
weixin_30797027的博客
05-17 120
目前页面滑动加载数据是很流行的一种方式，尤其是在手机端，应用也越来越广泛了，我在做项目的时候也遇到了，其实实现方式很简单，只是几行简单的代码就I可以搞定了，下面直接看代码 $(function() { // 滑动加载更多 $(window).scroll(function() { var scrollTop...
页面滚动自动加载数据脚本
weixin_30607659的博客
10-15 280
<!DOCTYPE=html> <html> <head> <scriptsrc="js/jquery.js"type="text/javascript"></script> <scripttype="text/javascript"> $(document).re...
移动端滑动加载
kings_coming的博客
12-17 456
移动端或pc端滑动加载 第一种方法 当页面滑到底的时候触发滑动事件，发起ajax请求，进而获取返回值，进行逻辑代码编写，最终用append方法添加新加载数据，后端代码这里就不贴出来，自己编写 $(function(){ var current=2; $(window).scroll(function(){ var scrollH = document.do...
Vue自定义指令：实现滚动加载无限数据实战
本文将着重讲解如何实现一个简单的Vue无限加载（加载更多）指令，用于在用户滚动到底部时自动加载新的数据。无限加载的核心原理是通过监听滚动事件，判断当前页面是否接近或到达内容的底部，以此触发数据请求。 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值