案例：懒加载

最新推荐文章于 2024-10-16 21:35:12 发布
最新推荐文章于 2024-10-16 21:35:12 发布
阅读量116 收藏
点赞数
文章标签： 前端 javascript html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Ghlys/article/details/128673240
版权

需求：
多个等宽的图片进行穿插排序成六列，并且在目前显示的最后一张图片显示之后，再进行下拉时能够在进行加载其他图片，每次下拉显示20-30张图片。
实现原理：
1、利用css多列布局实现瀑布流效果
2、利用js文档高度与滚动距离和窗口高度之间的关系触发内容渲染实现滚动条到窗口底部再加载内容的懒加载效果
实现代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin:0 ;
            padding: 0;
        }
        .waterFall{
            padding: 0 10px;
            column-count: 6;
        }
        img{
            width: 230px;
         margin: 10px auto;
        }
    </style>
</head>
<body>
    <div class="waterFall">
    </div>
    <script>
        var waterFall=document.querySelector(".waterFall")
            //后端的数组信息
        var arr1=["./JS学习/瀑布流img/O1CN01b9ST3r1NrNa4Lb49s_!!0-saturn_solar.jpg_300x300q90.jpg_.webp",
        "./JS学习/瀑布流img/0584000063A655F22052EE0992830E2E.jfif",
        "./JS学习/瀑布流img/O1CN01uruvbI1m07uPSsf16_!!2199304891.jpg_300x300q90.jpg_.webp",
        "./JS学习/瀑布流img/O1CN01BxWlGh2EXqM0yNN9l_!!0-item_pic.jpg_300x300q90.jpg_.webp",
        "./JS学习/瀑布流img/O1CN01cRHa2i1l9ukQWUB6h_!!0-item_pic.jpg_300x300q90.jpg_.webp",
        "./JS学习/瀑布流img/O1CN01GBJXrH1M7kR5HCLFn_!!2130151388.jpg_300x300q90.jpg_.webp",
        "./JS学习/瀑布流img/O1CN01hH5h1I1rSacAH46h6_!!0-item_pic.jpg_300x300q90.jpg_.webp",
        "./JS学习/瀑布流img/O1CN01IX4byG1pNQxlp5CV5_!!2209064045348.jpg_300x300q90.jpg_.webp",
        "./JS学习/瀑布流img/O1CN01JxEaE81GjrnBqszEH_!!0-item_pic.jpg_300x300q90.jpg_.webp",
        "./JS学习/瀑布流img/O1CN01K2WD6h1M7kP8B1ajB_!!2130151388.jpg_300x300q90.jpg_.webp",
        "./JS学习/瀑布流img/O1CN01LK2LRf2DN1NHTgRvY_!!0-item_pic.jpg_300x300q90.jpg_.webp",
        "./JS学习/瀑布流img/O1CN01oaTWGa1MoLFYsVSBM_!!2-saturn_solar.png_300x300q90.jpg_.webp",
        "./JS学习/瀑布流img/O1CN01OuiCDD1UuJRiM4uXY_!!0-item_pic.jpg_300x300q90.jpg_.webp",
        "./JS学习/瀑布流img/O1CN01oaTWGa1MoLFYsVSBM_!!2-saturn_solar.png_300x300q90.jpg_.webp",
        "./JS学习/瀑布流img/O1CN01p3lAA822KlbeGPx4d_!!0-saturn_solar.jpg_300x300q90.jpg_.webp",
        "./JS学习/瀑布流img/O1CN01pgXbCy1j7VUdewn1C_!!0-item_pic.jpg_300x300q90.jpg_.webp",
        "./JS学习/瀑布流img/O1CN01Q1AxYB24LnmLxooqk_!!0-item_pic.jpg_300x300q90.jpg_.webp",
        "./JS学习/瀑布流img/O1CN01QeEODI1HCikMaLctc_!!0-saturn_solar.jpg_300x300q90.jpg_.webp",
        "./JS学习/瀑布流img/O1CN01QxVR0j1nWTXX7w8pQ_!!0-item_pic.jpg_300x300q90.jpg_.webp",
        "./JS学习/瀑布流img/O1CN01R6lnzB28m8yt9BNc9_!!2269027974-0-alimamacc.jpg_300x300q90.jpg_.webp",
        "./JS学习/瀑布流img/0584000063B7FCB81427220B04BDC108 (1).jfif",
        "./JS学习/瀑布流img/O1CN01uJ1sH51RcxVHtgGqE_!!2212292362133.jpg_300x300q90.jpg_.webp",
        "./JS学习/瀑布流img/O1CN01U17qR61puPTm0ePxd_!!0-item_pic.jpg_300x300q90.jpg_.webp",
        "./JS学习/瀑布流img/O1CN01tL84AJ1ccvLSOzEdI_!!2381733622.jpg_300x300q90.jpg_.webp",
        "./JS学习/瀑布流img/O1CN01SzR9cg1jo6JicwU4i_!!0-item_pic.jpg_300x300q90.jpg_.webp",
        "./JS学习/瀑布流img/O1CN01SC4IkC1K33BKHxTT1_!!0-item_pic.jpg_300x300q90.jpg_.webp",
        "./JS学习/瀑布流img/O1CN01s1ZY1b1D1UakKe4Cp_!!0-saturn_solar.jpg_300x300q90.jpg_.webp",
        "./JS学习/瀑布流img/        O1CN018FdgfM1adiniiDm7D_!!0-item_pic.jpg_300x300q90.jpg_.webp",
        "./JS学习/瀑布流img/v_170780671_m_601_m6_260_360.webp",
        "./JS学习/瀑布流img/v_170904078_m_601_m2_480_270.webp",
        "./JS学习/瀑布流img/TB1JcF0zkY2gK0jSZFgXXc5OFXa.jpg_300x300q90.jpg_.webp",
        "./JS学习/瀑布流img/O1CN015FfXMp2NMhG2uJP1h_!!0-item_pic.jpg_300x300q90.jpg_.webp",
        "./JS学习/瀑布流img/v_170780671_m_601_m6_260_360.webp",
        "./JS学习/瀑布流img/O1CN0179j4IP1sUFg0TICLT_!!0-item_pic.jpg_300x300q90.jpg_.webp",
        "./JS学习/瀑布流img/O1CN01xlKK2u1cyRxncXwN7_!!0-item_pic.jpg_300x300q90.jpg_.webp",
        "./JS学习/瀑布流img/O1CN0184d3Py1cmXeTNtqvl_!!0-item_pic.jpg_300x300q90.jpg_.webp",
        "./JS学习/瀑布流img/O1CN01wneMoV20EhBCUx1hy_!!0-item_pic.jpg_300x300q90.jpg_.webp",
        "./JS学习/瀑布流img/0584000063B684A72052EE0992A0D187 (1).jfif",
        ]
        var arr2=["./JS学习/瀑布流img/O1CN01b9ST3r1NrNa4Lb49s_!!0-saturn_solar.jpg_300x300q90.jpg_.webp",
        "./JS学习/瀑布流img/0584000063A655F22052EE0992830E2E.jfif",
        "./JS学习/瀑布流img/O1CN01uruvbI1m07uPSsf16_!!2199304891.jpg_300x300q90.jpg_.webp",
        "./JS学习/瀑布流img/O1CN01BxWlGh2EXqM0yNN9l_!!0-item_pic.jpg_300x300q90.jpg_.webp",
        "./JS学习/瀑布流img/O1CN01cRHa2i1l9ukQWUB6h_!!0-item_pic.jpg_300x300q90.jpg_.webp",
        "./JS学习/瀑布流img/O1CN01GBJXrH1M7kR5HCLFn_!!2130151388.jpg_300x300q90.jpg_.webp",
        "./JS学习/瀑布流img/O1CN01hH5h1I1rSacAH46h6_!!0-item_pic.jpg_300x300q90.jpg_.webp",
        "./JS学习/瀑布流img/O1CN01IX4byG1pNQxlp5CV5_!!2209064045348.jpg_300x300q90.jpg_.webp",
        "./JS学习/瀑布流img/O1CN01JxEaE81GjrnBqszEH_!!0-item_pic.jpg_300x300q90.jpg_.webp",
        "./JS学习/瀑布流img/O1CN01K2WD6h1M7kP8B1ajB_!!2130151388.jpg_300x300q90.jpg_.webp",
        "./JS学习/瀑布流img/O1CN01LK2LRf2DN1NHTgRvY_!!0-item_pic.jpg_300x300q90.jpg_.webp",
        "./JS学习/瀑布流img/O1CN01oaTWGa1MoLFYsVSBM_!!2-saturn_solar.png_300x300q90.jpg_.webp",
        "./JS学习/瀑布流img/O1CN01OuiCDD1UuJRiM4uXY_!!0-item_pic.jpg_300x300q90.jpg_.webp",
        "./JS学习/瀑布流img/O1CN01oaTWGa1MoLFYsVSBM_!!2-saturn_solar.png_300x300q90.jpg_.webp",
        "./JS学习/瀑布流img/O1CN01p3lAA822KlbeGPx4d_!!0-saturn_solar.jpg_300x300q90.jpg_.webp",
        "./JS学习/瀑布流img/O1CN01pgXbCy1j7VUdewn1C_!!0-item_pic.jpg_300x300q90.jpg_.webp",
        "./JS学习/瀑布流img/O1CN01Q1AxYB24LnmLxooqk_!!0-item_pic.jpg_300x300q90.jpg_.webp",
        "./JS学习/瀑布流img/O1CN01QeEODI1HCikMaLctc_!!0-saturn_solar.jpg_300x300q90.jpg_.webp",
        "./JS学习/瀑布流img/O1CN01QxVR0j1nWTXX7w8pQ_!!0-item_pic.jpg_300x300q90.jpg_.webp",
        "./JS学习/瀑布流img/O1CN01R6lnzB28m8yt9BNc9_!!2269027974-0-alimamacc.jpg_300x300q90.jpg_.webp",
        "./JS学习/瀑布流img/0584000063B7FCB81427220B04BDC108 (1).jfif",
        "./JS学习/瀑布流img/O1CN01uJ1sH51RcxVHtgGqE_!!2212292362133.jpg_300x300q90.jpg_.webp",
        "./JS学习/瀑布流img/O1CN01U17qR61puPTm0ePxd_!!0-item_pic.jpg_300x300q90.jpg_.webp",
        "./JS学习/瀑布流img/O1CN01tL84AJ1ccvLSOzEdI_!!2381733622.jpg_300x300q90.jpg_.webp",
        "./JS学习/瀑布流img/O1CN01SzR9cg1jo6JicwU4i_!!0-item_pic.jpg_300x300q90.jpg_.webp",
        "./JS学习/瀑布流img/O1CN01SC4IkC1K33BKHxTT1_!!0-item_pic.jpg_300x300q90.jpg_.webp",
        "./JS学习/瀑布流img/O1CN01s1ZY1b1D1UakKe4Cp_!!0-saturn_solar.jpg_300x300q90.jpg_.webp",
        "./JS学习/瀑布流img/        O1CN018FdgfM1adiniiDm7D_!!0-item_pic.jpg_300x300q90.jpg_.webp",
        "./JS学习/瀑布流img/v_170780671_m_601_m6_260_360.webp",
        "./JS学习/瀑布流img/v_170904078_m_601_m2_480_270.webp",
        "./JS学习/瀑布流img/TB1JcF0zkY2gK0jSZFgXXc5OFXa.jpg_300x300q90.jpg_.webp",
        "./JS学习/瀑布流img/O1CN015FfXMp2NMhG2uJP1h_!!0-item_pic.jpg_300x300q90.jpg_.webp",
        "./JS学习/瀑布流img/v_170780671_m_601_m6_260_360.webp",
        "./JS学习/瀑布流img/O1CN0179j4IP1sUFg0TICLT_!!0-item_pic.jpg_300x300q90.jpg_.webp",
        "./JS学习/瀑布流img/O1CN01xlKK2u1cyRxncXwN7_!!0-item_pic.jpg_300x300q90.jpg_.webp",
        "./JS学习/瀑布流img/O1CN0184d3Py1cmXeTNtqvl_!!0-item_pic.jpg_300x300q90.jpg_.webp",
        "./JS学习/瀑布流img/O1CN01wneMoV20EhBCUx1hy_!!0-item_pic.jpg_300x300q90.jpg_.webp",
        "./JS学习/瀑布流img/0584000063B684A72052EE0992A0D187 (1).jfif",
        ]
        //将数据放射到html中
        function renderImg(arr){
            for(var i=0;i<arr.length;i++){
            var img=document.createElement("img")
            img.src=arr[i]
            waterFall.appendChild(img)
        }
        }
        renderImg(arr1)
        //防止画面渲染在滚动条一滚动就触发
        var isloading=false
        //滚动滚动条就触发事件
        window.onscroll=function(){
            var waterFallHeight=waterFall.offsetHeight
            var waterFallTop=waterFall.offsetTop
            var scrollTop=document.documentElement.scrollTop||document.body.scrollTop
            var windowHeight=document.documentElement.clientHeight
            if(isloading) return
            //计算（div高+距离文档左上角的高）-（窗口高+滚动距离)判断滚动条是否到底部
            if((waterFallHeight+waterFallTop)-(scrollTop+windowHeight)<200){
            //防止滚动条一动就触发渲染画面的事件
                isloading=true
                setTimeout(function(){
                    renderImg(arr2)
                    //确保内容渲染后再滚动滚动条才能再次触发渲染画面
                    isloading=false
                },500)
            }
        }

    </script>
</body>
</html>

实现效果：

QQ录屏20230113134944

IT噜噜
关注
vue懒加载案例
weixin_68658847的博客
03-06 148
vue懒加载案例
Element-UI：tree结构 实现懒加载案例
weixin_44209082的博客
05-24 1384
前言 在我们实际开发中，由于后端返回的节点数据量庞大，而用户往往没有要看到所有数据的需求，如果在页面加载中，将页面的所有节点数据都加载出来，无疑是浪费用户宝贵的时间。     因此，就有了节点的懒加载的需求，用户想展开哪个节点，我们就给他展示什么数据（异步的从后台发送请求获取当前节点数据然后进行渲染） Demo 逻辑简单介绍：点击当前节点调用后端接口，加载节点的下级数据 实现效果： <el-tree :props="props" // 展示你的数据信息
JS案例：触底懒加载
03-09 1617
接着上篇文章：ajax获取图片列表，我们来实现一下JS的经典案例，懒加载 在web应用中，系统的响应速度对用户体验十分重要，其最主要的影响来源于服务端数据库查询，以及DOM渲染。 数据库查询数据量大的情况下，我们可以进行分页配合前端分页或者懒加载进行优化，而这篇文章主要讲的是如何处理后端百万级数据对DOM渲染造成的影响，当然这也是大厂常问的题。
高效前端数据请求：懒加载技术的应用与实践
花海里的搁浅的博客
08-06 515
懒加载是一种延迟加载资源的技术，只有在需要时才加载数据。这种方法不仅能提高应用的性能，还能减少初始加载时间和带宽使用。懒加载常用于处理长列表、无限滚动和图片加载等场景。
懒加载案例
weixin_52120405的博客
03-08 195
懒加载： 懒加载也就是延迟加载。当访问一个页面的时候，先把img元素或是其他元素的背景图片路径替换成一张大小为1*1px图片的路径（这样就只需请求一次，俗称占位图），只有当图片出现在浏览器的可视区域内时，才设置图片正真的路径，让图片显示出来。这就是图片懒加载。 懒加载优点： 页面加载速度快、可以减轻服务器压力、节约了流量，用户体验好 HTML <body> <img src="" class="imgs" data-src="img/...
懒加载的案例
weixin_42060658的博客
11-14 384
$(function () { let flag = true; // 首次请求渲染列表 let res = ajaxRequest(``, { }) renderList(res) // 屏幕滚动触发事件(懒加载) window.onscroll = function ()...
案例--图片懒加载
tby_pr的博客
10-21 168
+ 只有进入(即将进入)可是区域的图片才进行加载 + 如果没有进入可视区域的图片不进行加载 问题1: 如果你希望实现图片懒加载, 那么渲染页面的时候, img 的 src 还能写吗 ? + 不能 + 但是有需要直到该 img 标签应该引入的是哪一张图片 + 所以我们以一个自定义属性的形式, 来把该 img 需要的图片地址记录在标签身上 问题2: 获取元素 + 不能在全局获取 // 1. 渲染页面 const ul = document.querySelector('...
mybatis:懒加载
weixin_34074740的博客
02-26 77
懒加载定义 按需加载，需要的时候再加载 案例 以cid查询一个班级，然后得到班级的信息，但是暂时不获取student的信息，当用到student时才去查询数据 使用 在需要懒加载的select语句后： ，+fetchType= FetchType.LAZY //一对多 //以班级id，找到该班级及所有的学生 @Select("select * from clazz") //cid cn...
鸿蒙HarmonyOS开发案例：加载时延类性能解决方案
weixin_55362248的博客
08-28 627
处理三方应用问题时，可以优先查看操作录屏，查看操作场景，看能否发现一些有助于定位的信息，比如滑动过程中是否存在图片加载动画，是否包含网络请求等等。
plover-json-lazy:懒加载Plover的JSON字典以缩短启动时间
04-03
"plover-json-lazy"项目就是针对这样的需求而设计的，它专注于缩短Plover的启动时间，通过采用懒加载（lazy loading）策略来处理JSON字典。本文将深入探讨这个概念以及它如何提升Plover的性能。 首先，让我们理解...
懒加载案例lazyload
08-27
在这个"懒加载案例-lazyload"中，我们可以深入探讨以下几个关键知识点： 1. **懒加载原理**： - **可见性检测**：懒加载的核心在于判断元素是否在用户的视口范围内。这通常通过计算元素距离浏览器窗口的距离和用户...
微信小程序实现图片懒加载的示例代码
08-28
微信小程序实现图片懒加载的示例代码 微信小程序实现图片懒加载的示例代码是指通过在页面预加载图片，提高用户体验度的一种技术。这种技术可以在微信小程序中实现，通过预加载图片，减少用户等待的时间，提高用户...
懒加载代码案例
08-30
懒加载，也称为延迟加载或按需加载，是一种优化网页性能的技术。在电脑端的应用中，懒加载尤其重要，因为它可以显著减少页面初次加载时的数据量，提高用户体验，特别是对于内容丰富的网页，如图片、视频或者长滚动...
解析vue路由异步组件和懒加载案例
12-02
本篇文章将深入解析Vue路由中的异步组件和懒加载，并通过一个案例来展示它们的实现方式。 ### 1. 原理 **异步组件** 是Vue.js 提供的一种优化手段，允许我们在需要的时候才去加载组件。这降低了初始页面的加载负担...
【前端】Bootstrap：响应式布局与工具类
2303_80346267的博客
10-13 959
Bootstrap 作为一个强大的前端框架，不仅为开发者提供了丰富的组件，还内置了强大的响应式设计工具。这些工具使得网页能够适应不同设备的屏幕尺寸，无论是桌面、平板，还是手机，网页都能呈现最佳的用户体验。本文将详细介绍 Bootstrap 的响应式设计理念以及与之相关的工具类。
Layout 布局组件快速搭建
最新发布
赵士杰——成功并非一蹴而就，而是在持之以恒的努力中逐渐实现。
10-16 2191
Layout 布局组件快速搭建： 1. 设置主题样式变量 2. 封装公共布局组件 3. 经典布局 4. 水平布局 5. 响应式布局 6. 搭建 Layout 布局组件 7. 添加 Layout 路由配置 8. 启动项目
06_实现watch
qq_53109172的博客
10-16 1156
watch 本质上就是监听一个响应式数据，这个响应式数据发生变化的时候，进行通知并触发相应的回调函数。
004-按照指定功能模块名称分组
xiaogang1226的博客
10-16 464
需要把一个功能模块的几个功能点放在同一个文档目录下，这几个功能点分布在不同的 Controller。需要把他们单独分组，方便前端对接。在@ApiOperation 里面增加属性 tags 赋值。
window自定义事件与触发
helloyangkl的博客
10-16 287
/ 1.触发事件// 2.注册初始化事件//传入参数：事件名称必须、是否冒泡、是否阻止默认事件、传递的数据: Tdetail: {},})//3.监听})// CustomEvent原始定义: T): void;
el-tree懒加载案例
07-29
在懒加载案例中，可以通过设置treeProps属性来指定树节点的属性，如子节点的字段名、标签名和是否为叶子节点。\[1\] 在loadNode方法中，可以根据节点的层级来处理不同的情况。对于第一层级的节点，可以直接设置叶子...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值