JS 滚动加载

最新推荐文章于 2024-07-16 17:26:59 发布
最新推荐文章于 2024-07-16 17:26:59 发布
阅读量428 收藏
点赞数
分类专栏： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43035350/article/details/83446452
版权

js滚动加载原理：

 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	
	</head>
<style type="text/css">
	 html,body,ul,li {
	margin:0;
	padding:0;
	border:0;
	vertical-align:baseline;
}
body,html {
	line-height:1;
	font-family:"Microsoft YaHei",Arial,Helvetica,sans-serif;
	font-size:16px;
	color:#333;
}
ol,ul {
	list-style:none;
}
a {
	text-decoration:none;
}
body {
	background:#f2f2f2;
}
.prolist li {
	height:50px;
	line-height:50px;
	border-bottom:1px solid #f8f8f8;
	background:#fff;
	padding:0 15px;
	text-overflow:ellipsis;
	overflow:hidden;
	white-space:nowrap;
}
.prolist li a {
	color:#333;
	font-size:16px;
}
/**加载效果旋转**/
        @-webkit-keyframes rotate {
	0% {
	-webkit-transform:rotate(0deg);
	transform:rotate(0deg);
}
100% {
	-webkit-transform:rotate(360deg);
	transform:rotate(360deg);
}
}@keyframes rotate {
	0% {
	-webkit-transform:rotate(0deg);
	transform:rotate(0deg);
}
100% {
	-webkit-transform:rotate(360deg);
	transform:rotate(360deg);
}
}.loadmore {
	display:block;
	line-height:50px;
	text-align:center;
	color:#ccc;
	font-size:14px;
}
.loadmore span {
	height:20px;
	width:20px;
	border-radius:100%;
	display:inline-block;
	margin:10px;
	border:2px solid #f60;
	border-bottom-color:transparent;
	vertical-align:middle;
	-webkit-animation:rotate 1.1s infinite linear;
	animation:rotate 1.1s infinite linear;
}
.loadover {
	position:relative;
	margin:0 12px;
	padding:24px 0;
	height:20px;
	line-height:20px;
	color:#909090;
	text-align:center;
}
.loadover span {
	position:relative;
	display:inline-block;
	padding:0 6px;
	height:20px;
	background:#F2F2F2;
	z-index:2
}
.loadover:after {
	content:''position:absolute;
	left:0;
	top:50%;
	width:100%;
	height:1px;
	background:#DCDCDC;
	z-index:1;
	display:block;
}
		
			
</style>
	
	
<body>
		
		
<ul class="prolist">
    <li><a href="">好经典人生语句，经典得让人心痛！</a></li>
    <li><a href="">好经典人生语句，经典得让人心痛！</a></li>
    <li><a href="">好经典人生语句，经典得让人心痛！</a></li>
    <li><a href="">好经典人生语句，经典得让人心痛！</a></li>
    <li><a href="">好经典人生语句，经典得让人心痛！</a></li>
    <li><a href="">好经典人生语句，经典得让人心痛！</a></li>
    <li><a href="">好经典人生语句，经典得让人心痛！</a></li>
    <li><a href="">好经典人生语句，经典得让人心痛！</a></li>
    <li><a href="">好经典人生语句，经典得让人心痛！</a></li>
    <li><a href="">好经典人生语句，经典得让人心痛！</a></li>
    <li><a href="">好经典人生语句，经典得让人心痛！</a></li>

</ul>	
		

<script src="<?php echo base_url('public/js/jquery-1.10.0.min.js')?>"></script>
<script>
		
	var page=1;
    var finished=0;
    var sover=0;

    //如果屏幕未到整屏自动加载下一页补满
    var setdefult=setInterval(function (){
        if(sover==1)
            clearInterval(setdefult);
        else if($(".prolist").height()<$(window).height())
            loadmore($(window));
        else
            clearInterval(setdefult);
    },500);

    //加载完
    function loadover(){
        if(sover==1)
        {
            var overtext="Duang～到底了";
            $(".loadmore").remove();
            if($(".loadover").length>0)
            {
                $(".loadover span").eq(0).html(overtext);
            }
            else
            {
                var txt='<div class="loadover"><span>'+overtext+'</span></div>'
                $("body").append(txt);
            }
        }
    }

    //加载更多
    var vid=0;
    function loadmore(obj){
        if(finished==0 && sover==0)
        {
            var scrollTop = $(obj).scrollTop();
            var scrollHeight = $(document).height();
            var windowHeight = $(obj).height();

            if($(".loadmore").length==0)
            {
                var txt='<div class="loadmore"><span class="loading"></span>加载中..</div>'
                $("body").append(txt);
            }

            if (scrollTop + windowHeight -scrollHeight<=50 ) {
                //此处是滚动条到底部时候触发的事件，在这里写要加载的数据，或者是拉动滚动条的操作


                //防止未加载完再次执行
                finished=1;

                var result = "";
                for(var i = 0; i < 6; i++){
                    vid++;
                    result+='<li>'
                    +'<a href="">好经典人生语句，经典得让人心痛！'+parseInt(vid)+'</a>'
                    +'</li>'
                }
                setTimeout(function(){
                    //$(".loadmore").remove();
                    $('.prolist').append(result);
                    page+=1;
                    finished=0;
                    //最后一页
                    if(page==10)
                    {
                        sover=1;
                        loadover();
                    }
                },1000);
                /*$.ajax({
                 type: 'GET',
                 url: 'json/more.json?t=25&page='+page,
                 dataType: 'json',
                 success: function(data){
                 if(data=="")
                 {
                 sover = 1;
                 loadover();
                 if (page == 1) {
                 $("#no_msg").removeClass("hidden");
                 $(".loadover").remove();
                 }
                 }
                 else
                 {
                 var result = ''
                 for(var i = 0; i < data.lists.length; i++){
                 result+='<li>'
                 +'<a href="'+data.lists[i].link+'">'+data.lists[i].title+parseInt(page+1)+"-"+i+'</a>'
                 +'</li>'
                 }

                 // 为了测试，延迟1秒加载
                 setTimeout(function(){
                 $(".loadmore").remove();
                 $('.prolist').append(result);
                 page+=1;
                 finished=0;
                 //最后一页
                 if(page==10)
                 {
                 sover=1;
                 loadover();
                 }
                 },1000);
                 }
                 },
                 error: function(xhr, type){
                 alert('Ajax error!');
                 }
                 });*/
            }
        }
    }
    //页面滚动执行事件
    $(window).scroll(function (){
        loadmore($(this));
    });	
		
</script>	
		
		
		
		
	</body>
</html>

 

给我一瓶冰阔洛
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
【JS】滚动加载
weixin_42575720的博客
07-08 1045
前端获取到的数据很多的时候，如果数据量很大，往往不能一次性加载出来，如果页面不做分页的话，可以采取这种滚动加载的方式。以下面这张图所展示的网页举例，单独对某一个页面进行滚动监听则可以达到滚动加载的效果。 代码如下：HTML代码 js代码............
JS滚动加载
weixin_37892321的博客
03-17 150
<!doctype html> <html> <head> <meta charset="utf-8"> <style> ul{ height: 100px; width: 100px; overflow: auto; margin: 0; padding: 0; } input{ width: 96px; } </style&gt...
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实现无限滚动加载数据
最新发布
lbking666666的专栏
07-16 988
entries是传递给回调函数的一个参数，它是一个包含对象的数组。每个对象表示一个被观察目标元素的最新交叉状态（即目标元素与根元素或视口的交集）。IntersectionObserverEntry 对象每个time一个时间戳，表示交叉状态变化的时间戳，精确到毫秒，通常用于性能测量。target被观察的目标元素，即观察器正在观察的具体 DOM 元素。rootBounds一个对象，表示根元素的边界框。如果根元素是视口，则表示视口的边界框。一个对象，表示目标元素的边界框，即元素在视口中的位置和尺寸。一个。
iscroll.js滚动加载实例详解
10-19
在本文中，我们将深入探讨iscroll.js，一个用于实现高性能滚动效果的JavaScript库，特别是针对滚动加载（infinite scroll）的实例。iscroll.js通过优化滚动性能，使得在移动设备和桌面浏览器上都能流畅地处理大量的...
JS滚动加载图片
12-01
给需要滚动加载的图片添加上data-url属性，值为图片的真实地址，src属性填写一张默认图片的地址。 方法引用 确定好一个有固定高度，且有滚动条的块级元素后，调用方法imgRunLoading(string id,boolean isConstant)...
JavaScript实现无穷滚动加载数据
10-19
本文将介绍如何使用JavaScript实现一个简单的无穷滚动加载数据的功能。 首先，要实现无穷滚动加载数据，我们需要监听滚动条事件(onscroll)，以检测用户何时滚动到了页面底部，这是触发数据加载的关键时机。页面底部...
js 滚动加载
diboxuan0073的博客
02-21 99
$(function(){ var page=2, canPullUP=true, //控制是否可以继续滑动加载 stopScroll=true, pullUpOffset=450; function getData(id,pageSize){ $('#pullUp').show(); $.ajax({ ...
js滚动加载
YikL_的博客
11-02 238
初始化给盒子添加滚动事件 componentDidMount () { let picDiv = document.getElementById('picList') this.addEnlist(picDiv, 'mousewheel', this.scrollFun.bind(this, picDiv)) this.addEnlist(picDiv, 'DOMMouseScroll', this.scrollFun.bind(this, picDiv)) } 判
简单得js滚动加载
qq_43287934的博客
08-31 179
//滚动加载数据 $(window).scroll(function(){ var scrollTop = $(this).scrollTop(); var scrollHeight = $(document).height(); var windowHeight = $(this).height(); if(scrollTop + windowHeight == ...
懒加载原理
undefined_surf的博客
06-17 319
滚动加载图片（懒加载）实现原理 时间 2015-12-13 01:25:00  博客园精华区 原文  http://www.cnblogs.com/flyromance/p/5042187.html 主题 jQuery 本文主要根据 一、什么是图片滚动加载？ 通俗的讲就是：当访问一个页面的时候，先把img元素或是其他元素的背景图片路径替换成一张大小为1*1p
JS实现滚动加载更多
油墨香^-^的博客
05-13 124
我们可以在scroll事件处理函数中检测当前的滚动位置和页面的高度，来判断用户是否已经滚动到了页面底部。在这个例子中，我们使用了jQuery的scrollTop、height和documentHeight函数来获取当前的滚动位置、窗口高度和页面高度。最后，我们需要一个用来检测用户是否滚动到页面底部的函数。我们可以在scroll事件处理函数中调用加载数据的函数，来实现滚动加载更多的功能。在这个例子中，我们使用了jQuery的$.ajax函数来发送一个GET请求，并指定了服务器的URL和数据的格式。
jQuery插件Lazy Load作延迟加载图片的效果
混在中关村
03-23 137
   QQ空间的邱跃鹏在其PPT里提到"按需加载"优化WEB性能的方式,  淘宝也使用了一边下拉滚动条，一边加载内容的方式; 出于好奇,google了一下, 整理如下:    Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预加载的处理方式正好是相...
vue.js滚动加载节流方法
06-06
在Vue.js中，我们可以通过自定义指令来实现滚动加载的节流方法。下面是一个基于Vue.js的滚动加载节流指令： ```javascript Vue.directive('scroll-throttle', { inserted: function(el, binding) { let timer = ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值