页面数据懒加载

本文介绍了一个数据懒加载的实现案例,通过前后端交互,实现滚动加载更多数据的效果,使用PHP处理MySQL数据库,配合jQuery和Bootstrap完成前端展示。

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

数据懒加载案例:
思路:滑动滚轮,当每次页面滚动条滑动至底部加载一定数量的数据。

conn.php 是连接数据库的文件
首先,在MySQL数据库创建了300条数据
addItem.php

<?php
    include "./conn.php";
    //在数据库中创建300条数据
    for($i=0;$i<300;$i++){
        $sql="INSERT INTO `product`( `title`, `price`, `num`, `pic`, `details`) VALUES ('test$i','100',20,'./images/$i.jpg','xxxxxx')";
        $conn->query($sql);
    }
    $conn->close();
?>

后端接收到前端发送过来的page数据进行数据库操作
getpage.php

<?php
    include "./conn.php";

    $currentPage=$_REQUEST['page'];// 当前页数
    $pageSize=20;// 每一次查询的数据数量
    $stratRow=($currentPage-1)*$pageSize;
    $sql="select * from product limit $stratRow,$pageSize";
    $res=$conn->query($sql);
    $arr=array();
    while($row=$res->fetch_assoc()){
        array_push($arr,$row);//将返回的结果集放入数组
    }
    $json=json_encode($arr);
    echo $json;
    $conn->close();//关闭数据库
?>

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.js"></script>
    <script>
        $(function(){
            //采用闭包的写法来存储p的值
            var page=(function(){
                var p=1;
                return {
                    get:function(){
                        return p;
                    },
                    plus:function(){
                        p++;
                    }
                }
            })();

            getData();//先触发一次加载数据的函数,先让页面中显示20条数据

            //1.思考:什么时候加载数据?
            //当滚动条拉到底部 加载数据
            $(window).on('scroll resize',function(){
                // 2.思考:如何判断滚动条拉到了底部
                // 滚动条已滚动的距离+窗口高度 === 文档高度

                let $scrollTop=$(window).scrollTop();//滚动条已滚动的距离
                let $documentHeight=$(document).height();//文档高度
                let $windowHeight=$(window).height();//窗口高度

                if($scrollTop+$windowHeight===$documentHeight){//滚动条拉到底部时
                    page.plus();//页数进行+1
                    getData();//加载数据
                }

            })


            function getData(){
                //发送ajax请求 加载数据
                $.ajax({
                    type:'get',
                    url:'../interface/getpage.php',
                    data:{
                        page:page.get()
                    },
                    dataType:'json',
                    success:function(res){//请求到的res是一个数组
                        //为什么要进行res.length的判断?
                        //因为当数据全部加载完成,拖动滚动条至顶部,还是会发送ajax给后端去请求数据
                        //所以当请求到的res数组长度为0时,即无数据时,移除滚轮事件,终止ajax请求数据
                        if(res.length){
                            res.forEach(elm=>{
                                $('tbody').append(`
                                    <tr>
                                        <td>${elm.sid}</td>
                                        <td>${elm.title}</td>
                                        <td>${elm.price}</td>
                                        <td>${elm.num}</td>
                                        <td>${elm.pic}</td>
                                        <td>${elm.details}</td>
                                    </tr>
                                `);
                            });
                        }else{
                            $('tbody').append(`<tr><td colspan="6">没有更多的数据了...</td></tr>`);
                            $(window).off('scroll resize');
                        }
                    }
                })
            }
            
        })
    </script>
</head>
<body>
    <div class="container">
        <table class="table table-bordered table-hover text-center">
            <thead>
                <caption class="text-center h3">商品信息表</caption>
                <tr>
                    <td>id</td>
                    <td>title</td>
                    <td>price</td>
                    <td>num</td>
                    <td>pic</td>
                    <td>details</td>
                </tr>
            </thead>
        </table>
    </div>
</body>
</html>

在这里插入图片描述
在这里插入图片描述

### HTML 页面数据懒加载实现方法 #### 使用 React 实现基于滚动的数据懒加载 为了实现在前端页面上的数据懒加载,可以采用React框架配合特定的组件设计模式。对于描述的情况,在`<div>`元素内部分为头部和主体两大部分,其中主体部分用于展示动态加载的内容[^1]。 当涉及到非图片类型的其他元素时,同样的懒加载策略依然适用。这意呸着可以在获取到新一批次的数据之后更新DOM节点,而不仅仅是替换图像源路径[^2]。 针对现代浏览器对原生HTML懒加载特性的支持程度不同,开发者应当编写兼容性检测代码片段来确认当前环境是否允许简化操作流程。例如,利用JavaScript探查特性存在与否,并据此调整后续渲染行为[^3]。 具体来说,对于大量待呈现的信息项(如列表),应该监听窗口或容器内的垂直位移变化事件;每当用户接近底部边界线附近时触发网络请求抓取下一页记录集合,并即时追加至现有视图末端完成无缝衔接效果。以下是具体的实践案例: ```jsx import React, { useState, useEffect } from 'react'; function LazyLoadData() { const [items, setItems] = useState([]); const [hasMore, setHasMore] = useState(true); let pageIdx = 0; let pageSize = 5; useEffect(() => { function handleScroll() { if (window.innerHeight + window.scrollY >= document.body.offsetHeight - 10 && hasMore) { fetchMore(); } } window.addEventListener('scroll', handleScroll); return () => window.removeEventListener('scroll', handleScroll); }, [hasMore]); async function fetchData(pageIndex, size) { try { // 假设这是API端点URL const response = await fetch(`/api/data?page=${pageIndex}&size=${size}`); const data = await response.json(); if (!data.length || data.length < size) { setHasMore(false); // 如果返回的数据少于预期数量,则认为已无更多数据加载 } setItems(prevItems => [...prevItems, ...data]); } catch (error) { console.error(error.message); } } function fetchMore() { ++pageIdx; fetchData(pageIdx, pageSize); } useEffect(() => { // 初始加载第一页数据 fetchData(pageIdx, pageSize); }, []); return ( <> {/* Header */} <div className="header"> Options Bar... </div> {/* Scroll Body with lazy-loaded items */} <div className="scroll-body"> {items.map((item, index) => <div key={index} style={{ marginBottom: "8px", padding: "4px", border: "solid 1px #ccc" }}> Item Content Here... </div> )} {!hasMore && <p>No more items to load.</p>} </div> </> ); } export default LazyLoadData; ``` 这段代码展示了如何创建一个能够响应用户滚动动作自动分页加载内容的应用程序界面。它通过监听全局范围内的滚轮移动状况,在满足件时发起新的HTTP GET请求以取得额外的数据集并将其附加到现有的UI布局之中。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值