js滚动加载内容

最新推荐文章于 2021-05-17 10:54:44 发布
最新推荐文章于 2021-05-17 10:54:44 发布
阅读量550 收藏
点赞数
分类专栏： Jquery Javascript 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/clj9017/article/details/37319297
版权 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>滚动加载</title>
</head>
<script src="file:///D|/wamp/www/Js/jquery-1.10.2.min.js" type="text/javascript"></script>
<body>
<div id="loading"></div>
<div style="width:auto; height:1000px;">
</div>
 <script type="text/javascript">

        $(document).ready(function() {

            $("#loading").html("正在加载...");

            setTimeout("getData()", 1500);

        });
        var s = setInterval("isShow()", 1500);//每隔1.5秒判断滚动条是否在2/3处,是的话加载数据
        var isShow = function() {//判断是否显示数据
            if ($(window).scrollTop() + $(window).height() >= $(document).height()*2/3) {
                $("#loading").html("正在加载....");
                setTimeout("getData()", 1500);
            }
        };
        var getData = function() {//Ajax获取服务器数据
            $.ajax({//初始化
                url: "Service.aspx",
                type: 'GET',
                data: { page: getPage() },
                dateType: 'html',
                timeout: 120000,
                success: function(msg) {
                    if (msg == "") {
                        clearInterval(s);//循环停止
                        $("#loading").html("加载完成了");
                        return false;
                    } else {
                        $("#documentDiv").append(msg);
                        $("#pIndex").val(getPage() + 1);
                        $("#loading").html("");
                    }
                }
            });
        };
        var getPage = function() {//获得当前页码
            return parseInt($("#pIndex").val());
        };
    </script>
</body>
</html>

fuyangclj
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
【JS】滚动加载
weixin_42575720的博客
07-08 1039
前端获取到的数据很多的时候，如果数据量很大，往往不能一次性加载出来，如果页面不做分页的话，可以采取这种滚动加载的方式。以下面这张图所展示的网页举例，单独对某一个页面进行滚动监听则可以达到滚动加载的效果。 代码如下：HTML代码 js代码............
JS滚动加载
农码精神
03-24 101
JS滚动加载 var one = true;//设置一个全局变量 $(window).scroll(function () { var hight = document.body.scrollHeight - document.body.scrollTop - window.screen.height;//页面往下滚动的时候，定义最...
js 滚动加载
diboxuan0073的博客
02-21 90
$(function(){ var page=2, canPullUP=true, //控制是否可以继续滑动加载 stopScroll=true, pullUpOffset=450; function getData(id,pageSize){ $('#pullUp').show(); $.ajax({ ...
JS 滚动加载
Bug制造者
10-27 422
js滚动加载原理：   &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;/head&gt; &lt;style type="text/css"&gt;
iscroll.js滚动加载实例详解
10-19
在本文中，我们将深入探讨iscroll.js，一个用于实现高性能滚动效果的JavaScript库，特别是针对滚动加载（infinite scroll）的实例。iscroll.js通过优化滚动性能，使得在移动设备和桌面浏览器上都能流畅地处理大量的...
jquerymobile滚动加载内容
08-13
本篇将深入探讨如何利用jQuery Mobile和Ajax实现滚动加载内容这一功能，这对于创建无限滚动的网页尤其重要。 一、jQuery Mobile 概述 jQuery Mobile是一个基于jQuery库的轻量级框架，它为移动设备提供了一套统一的...
基于JavaScript开发的滚动加载页面图片+源码
最新发布
07-30
基于JavaScript开发的滚动加载页面图片+源码 基于JavaScript开发的滚动加载页面图片+源码 基于JavaScript开发的滚动加载页面图片+源码 基于JavaScript开发的滚动加载页面图片+源码 基于JavaScript开发的滚动加载...
JavaScript实现无穷滚动加载数据
10-19
主要为大家详细介绍了JavaScript实现无穷滚动加载数据，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
jquery mobile 滚动加载内容
04-21
当我们谈论“jQuery Mobile 滚动加载内容”时，我们实际上是在讨论一种动态加载技术，即在用户滚动页面到接近底部时，通过 AJAX（异步 JavaScript 和 XML）技术从服务器获取并插入更多内容，以实现无尽滚动的效果。...
JS滚动列表加载
12-01
参数说明 listLoadingMore({id:"",id2:function(){},action:function(){},pageNum:10,getNew:undefined,funcArg:undefined,func:function(){},loadingMustTime:0,loadingDom:function(){},loadedDom:function(){},nullDataFunc:function(){},endFunc:function(){},errorFunc:function(){}}); id：滚动条id，不可以是body； id2：滚动列表的id，通过function自行根据情况返回； action：数据来源的ajax地址，插件会自动加上page和length(分别表示请求页数和当前已有记录数)，返回格式统一是[{},{}...]，此类jsonArray； ajaxType：ajax提交方式，将更改传递数据的方式，默认post； pageNum：每页加载数量，将会根据这个数量判断是否全部加载完成； getNew：自定义获取数据方法； funcArg：自定义获取数据时传递的参数，类型为函数，返回所需参数； childrenTag：列表子项的标签，默认LI； func：非自定义获取数据时，创建每行数据的方法； loadingMustTime：强制最小加载时间，默认0； loadingDom：加载中动画自定义，返回Dom或者HTML代码； loadedDom：完全加载完成动画自定义，返回Dom或者HTML代码； nullDataFunc：数据列表为空时执行的方法； endFunc：每页数据加载完成时执行的方法； errorFunc：ajax获取数据失败时调用的方法。 回调方法 调用本方法初始化后将会得到一个专属的方法集： Object {getNew:function,isFull:function,isRunning:function,isStop:function,loading:function,show:function}; getNew()：忽略判断条件，强制执行加载操作。此时数据传递中,page值可能出错，但length值一定正确，请谨慎判断后在执行该方法； isFull(boolean)：修改列表加载完成标志。true为全部加载完成，false则相反； isRunning(boolean)：修改列表当前是否正在加载中标志。几乎没有使用的机会； isStop(boolean)：设置是否停止加载，设置为true时将会阻止未来的所有加载操作； loading()：根据当前滚动条的位置，自动判断是否需要加载新数据； show(boolean,boolean)：强制设置加载中和加载完成dom的显示或隐藏，true表示显示，false相对。
JS滚动加载图片
12-01
导入脚本 导入imgRunLoading.js脚本文件，或将其写入您的常用脚本文件中。 脚本代码片段提供未压缩和压缩过后的2种代码片段供你选择，请根据实际情况自行判断。 基础设置 给需要滚动加载的图片添加上data-url属性，值为图片的真实地址，src属性填写一张默认图片的地址。 方法引用 确定好一个有固定高度，且有滚动条的块级元素后，调用方法imgRunLoading(string id,boolean isConstant)。 参数有两个，第一个是该滚动元素的id，第二个参数指示是否是固定(无新增)图片，默认为false。 扩展-手动执行 由于图片滚动加载只会在滚动时执行，所以对于即时加入的图片将不会进行加载操作，此时你可以执行扩展方法loading()去实时执行一次加载方法 补充说明 影响范围：仅对滚动元素内包含data-url属性的img起效 起效条件：仅对出现在视窗内的img起效 起效漏洞：仅对竖向滚动条起效，无视横向滚动条
js滚动加载
Wancc123的博客
05-17 1953
//监听滚动时间 window.onscroll = function () { // 获取滚动的内容实际高度（包括超出可视窗的溢出部分） var scrollHeight = Math.max(document.documentElement.scrollHeight, document.body.scrollHeight); //获取滚动条滚动的距离 var scrollTop = window.pageYO
简单得js滚动加载
qq_43287934的博客
08-31 173
//滚动加载数据 $(window).scroll(function(){ var scrollTop = $(this).scrollTop(); var scrollHeight = $(document).height(); var windowHeight = $(this).height(); if(scrollTop + windowHeight == ...
vue.js滚动加载节流方法
06-06
-- 滚动加载的内容 --> export default { data() { return { // ... }; }, methods: { loadMore() { // 执行滚动加载的逻辑 } } }; ``` 这样，我们就可以实现在滚动时每隔一段时间才执行一次...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值