javascript-#前端#一次性请求数据,然后滚动加载

问题描述

#前端#一次性请求数据,然后滚动加载

#前端#如果页面数据是一次性全部加载进来,但是只在页面上显示8条,我要滚动加载显示后面的数据,如何做,或是有什么思路

解决方案

已解决:

 $(window).scroll(function(){
    //当滚动到底部的时候,判断是否有8条数据,如果大于8条则显示前8条;如果小于8条,则全显示
  var scrollTop = $(this).scrollTop();
  var scrollHeight = $(document).height();
  var windowHeight = $(this).height();

  if(scrollTop + windowHeight == scrollHeight){//滚动到底部
            pageIndex++;
            var len=$("li.hide").length;
            //判断是否有8条数据
            if(len<=8){//如果小于等于8条,则全显示
                $("li.scrollItem").each(function(){
                    $("li.scrollItem").removeClass("hide");
                });
                if(len==0){
                    $("#navigation").text("T_T没有新数据了...");
                    $("#navigation").css("border","0");
                }
            }else if(len>8) {//大于8条
                //显示8条
                    $("li.hide:lt(8)").removeClass("hide");
            }
  }
});

解决方案二:

页面上面加载的所有数据都加载到页面上去,然后初始化的时候把前8条显示出来,后面的都hide,
页面滚动条滚动到最下面的时候触发一个事件,让pageIndex加一,这样的话就把2乘8条数据显示出来,后面的以此类推。

解决方案三:

那不是和分页一样,多余的先隐藏,然后用全局变量i记录显示的页数,滚动到页低就i++,然后显示i*page条数据

js判断已经滚动到页面底部

时间: 2025-01-06 03:03:03

javascript-#前端#一次性请求数据,然后滚动加载的相关文章

JavaScript仿淘宝页面图片滚动加载及刷新回顶部的方法解析_javascript技巧

淘宝图片处理讨论淘宝网页面很大,但是打开速度很快.其对图片处理是运用了滚动加载,就是滚动轴滚到哪里,图片在哪里加载.但是你想查看他的源代码,那要费九牛二虎之力吧,因为他们代码压缩合并做的很好!因为图片是滚动加载的,初始化的时候图片不加载,那么当你在页面底部刷新页面的时候,底部的页面通常不会加载出来,淘宝网的做法貌似是(因为我没有看他们的源代码,只是凭操作),刷新让页面回到顶部. 模仿淘宝,做滚动图片加载 这里想到了三种方法:1.javascript懒加载之可视区域加载 <!DOCTYPE htm

解析javascript瀑布流原理实现图片滚动加载_javascript技巧

先科普下瀑布流吧 瀑布流,又称瀑布流式布局.是比较流行的一种网站页面布局,视觉表现为参差不齐的多栏布局,随着页面滚动条向下滚动,这种布局还会不断加载数据块并附加至当前尾部.最早采用此布局的网站是Pinterest,逐渐在国内流行开来.国内大多数清新站基本为这类风格,像美丽说.淘宝网都有使用. 这是我实现的一个效果,就是怎么滚动都加载不玩.就跟瀑布一样流啊流! 这里的实现方式我们只说Js实现方法 实现原理: 对容器中已有数据块元素进行第一次计算1 容器总宽度 2 列宽度  3 最小列数 ,得到列数

使用jQuery或者原生js实现鼠标滚动加载页面新数据_jquery

相信很多人都见过瀑布流图片布局,那些图片是动态加载出来的,效果很好,对服务器的压力相对来说也小了很多,用鼠标操作的时候相信都见过这样的效果:进入qq空间,向下拉动空间,到底部时,会动态加载剩余的说说或者是日志 ,今天我们就来看看他们的实现思路和js控制动态加载的代码. 下面的代码主要是控制滚动条下拉时的加载事件的,无论是加载图片还是加载记录数据  都可以. 加载jQuery库后我们可以这样使用:   $(window).scroll(function () { var scrollTop = $

Angularjs 滚动加载更多数据_AngularJS

下面的例子只是为了简单记录怎么使用angularjs来实现滚动加载数据,具体的还是需要具体看待: Javascript部分的controller app.controller('AnalysizerCtrl', ['$scope', '$timeout', '$window', function ($scope, $timeout, $window) { $scope.showData = false; $scope.isLoadingPIG = false; $scope.isLoadingU

移动设备的HTML页面中图片实现滚动加载

如今移动互联网风靡全球,移动页面的元素也是丰富多彩,一个移动页面的图片超过10张已经是再正常不过的事情了.但是相对,很多移动用户还停留在2G,3G这样的网络中.那么这样带宽的用户,在浏览这样的页面时,要把页面加载完毕,可能就需要10s,20s甚至更多,严重影响用户的体验.针对这样的问题,让页面中的图片滚动加载(图片出现在显示器屏幕上时再加载图片)显得非常重要!这样也可以有效地节省我们服务器的带宽和解决请求大并发的问题. 1.效果图.     这是加载过程中的图片菊花显示            

浏览器窗口滚动加载数据采用异步形式从后台加载数据

 在滚动条距顶部距离(页面超出窗口的高度)时采用异步形式从后台加载数据,下面是具体的实现,希望对大家有所帮助 以下滚动效果为在网上查找.    在滚动条距顶部距离(页面超出窗口的高度)时采用异步形式从后台加载数据  代码如下: <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ScrollLoadData.aspx.cs" Inherits="WebApplicat

jquery滚动加载数据的方法

 这篇文章主要介绍了jquery滚动加载数据的方法,实例分析了jQuery动态加载数据的技巧,具有一定参考借鉴价值,需要的朋友可以参考下     本文实例讲述了jquery滚动加载数据的方法.分享给大家供大家参考.具体分析如下: 我们浏览有些网页的时候,当拉动浏览器的滚动条时到页底时,页面会继续自动加载更多内容供用户浏览.这种技术我暂且称它为滚屏加载技术,我们发现很多网站用到这种技术,例如新浪微博.QQ空间等. 代码如下: 代码如下: <!DOCTYPE=html> <html>

jquery滚动加载数据的方法_jquery

本文实例讲述了jquery滚动加载数据的方法.分享给大家供大家参考.具体分析如下: 我们浏览有些网页的时候,当拉动浏览器的滚动条时到页底时,页面会继续自动加载更多内容供用户浏览.这种技术我暂且称它为滚屏加载技术,我们发现很多网站用到这种技术,例如新浪微博.QQ空间等. 代码如下: 复制代码 代码如下: <!DOCTYPE=html> <html> <head> <script src="js/jquery.js" type="text

HTML5商城开发一 楼层滚动加载数据

对于楼层加载在以前只是个想法,从来没实现过,刚好项目中碰到,再此总结一下 场景:HTML5,局部商品列表信息滚动(局部滚动条) 1.通过jq设置subCategoryScroll的高度为屏幕显示高度(假设为100),设置productlist的高度为列表信息的实际高度(假设为300) <div id="subCategoryScroll" style="overflow: hidden; overflow-y: scroll;"> <ul clas