页面向下滚动加载数据(类似朋友圈、微博)

最新推荐文章于 2022-03-01 14:49:49 发布

转载最新推荐文章于 2022-03-01 14:49:49 发布 · 209 阅读

1 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/xiehongwei/p/8795654.html

文章标签：

#java #javascript #ViewUI

本文介绍了一种在网页开发中采用分段加载技术提高用户体验的方法。通过实现页面内容的逐步展示，有效减轻了服务器负担并提升了用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在web开发中，有时候一个页面要展示很多信息，如果一次性全部加载可能或导致页面很卡，请求后台高负荷工作，这样不仅用户体验很差，系统设计也是存在问题的，因此首先想到的方法就是像朋友圈、微博那样先默认加载部分数据，向下滚动的时候再加载新的数据。

百度科普了一些资料再结合自己的项目做了一个简单的加载，由于办法很笨简单，所以后续还得修改完善，先把这个思路记录下来。

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@include file="/context/mytags.jsp"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<!-- 引入 ECharts 文件 -->
<script src="js/jquery-3.1.1.js"></script>
<script src="js/echarts.min.js"></script>
<script type="text/javascript" src="js/common-date-util.js"></script>
<script type="text/javascript" src="webpage/pulin/pulinModel.js"></script>

<title>趋势报表</title>
</head>
<body style="width:99%">
<t:base type="jquery,easyui,tools,DatePicker,autocomplete"></t:base>

<center>
    <div style="width:90%">
        <div>
            <p style="margin-bottom: 50px"><font style="font-size:20px" face="arial" color="red">模块一：测试</font></p>
            <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
            <div style="padding:8px;border:1px solid #96c2f1;background:#eff7ff; text-align: center;">
                <div id="model1" style="width: 99%; height: 400px;"></div>
            </div>
        </div>
        <div>
            <p style="margin-bottom: 50px"><font style="font-size:20px" face="arial" color="red">模块二：模型</font></p>
            <div style="padding:8px;border:1px solid #96c2f1;background:#eff7ff; text-align: center;">
                <div id="model31" style="width: 99%; height: 500px;"></div>
            </div>
            <div style="padding:8px;border:1px solid #96c2f1;background:#eff7ff; text-align: center;">
                <div id="model32" style="width: 99%; height: 400px;"></div>
            </div>
            <div id="model3" style="padding:8px;border:1px solid #96c2f1;background:#eff7ff; text-align: center;">
                <div id="model33" style="width: 99%; height: 400px;"></div>
            </div>
            <div id="model4" style="padding:8px;border:1px solid #96c2f1;background:#eff7ff; text-align: center;">
                <div id="model34" style="width: 99%; height: 400px;"></div>
            </div>
        </div>
    </div>
</center>
</body>


<script type="text/javascript">
    var myChart1 = echarts.init(document.getElementById('model1'));
    var myChart31 = echarts.init(document.getElementById('model31'));
    var myChart32 = echarts.init(document.getElementById('model32'));
    var myChart33 = echarts.init(document.getElementById('model33'));
    var myChart34 = echarts.init(document.getElementById('model34'));
    
    loadModel1();
    load1();
    load2();
    //load3();
    //load4();
    $(function() {
        $("#model3").hide();
        $("#model4").hide();
    });
    
    // echarts 随屏幕大小改变大小chart.resize()
    setTimeout(function (){
        window.onresize = function () {
            myChart1.resize();
            myChart31.resize();
            myChart32.resize();
            myChart33.resize();
            myChart34.resize();
        }
    },200)
    
</script>

</html>

window.onload=function (){
    // 判断加载过后就不要再加载
    var flag3 = true;     
    var flag4 = true;     
            
    window.onscroll = function() {
        var scroT=document.documentElement.scrollTop||document.body.scrollTop;  
        //var clieH=document.documentElement.clientHeight||document.body.clientHeight; 
        // 900 和 1300 是model3和model4滚动到的位置
        if(scroT>800 && scroT<1200 && flag3==true){
            $("#model3").show();
            load3();
            flag3 = false;
        }else if(scroT>1200 && flag4==true){
            $("#model4").show();
            load4();
            flag4 = false;
        }
      };
};

我这里是默认先load了前面三个图表的数据，向下滚动鼠标再显示后面两个再加载数据。

转载于:https://www.cnblogs.com/xiehongwei/p/8795654.html