原生JS JavaScript实现懒加载效果

我是一名接触编程不久的小白，今天为大家带来这个案例，希望可以帮助到你。

懒加载是现在常见的的一种加载方式，是滑动到一定距离才加载新的数据，这样可以减少设备内存的负担。

话不多说，开始展示吧.

这个懒加载效果使用滚动条事件触发，每当滚动条触底一次就会将全部数据重新截取重新载入。每次向下滑动，距离顶部的距离都会改变，每一段距离需要截取的信息数量都不同，用当前距离顶部的高度值除以单条数据的高度（可能有时需要减去第二张图片的a值），再乘以每一行的的列数，就是当前距离顶部高度需要截取的信息数量。比如第二张图片中，我向下滑动了t像素的距离，就需要用t来除以每一张图片及下部文字盒子的高度，再乘以六列的6，就是当前距离需要截取的信息数量。需要注意我这个不是添加新的数据，而是将全部数据进行一重新截取，每一次截取数量大于上一次截取数量，来达到懒加载的效果。

代码如下：

上面两张的信息是使用Ajax请求的，这里为了方便诸位实验，我便将数据写入js里。

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<style>.box9 {margin: 0 auto;/* 动漫推荐 */width: 255px;height: 500px;/* border: rgb(182, 164, 0) 1px solid; */}.box9-1 {width: 255px;height: 50px;border: rgb(0, 0, 0) 1px solid;}.box9-1 span {position: absolute;margin-top: 15px;font-size: 24px;}.box9-2 {width: 255px;height: 450px;overflow: hidden;border: rgb(0, 0, 0) 1px solid;}.box9-2:hover {overflow-y: scroll;}.box9-3 {margin-top: 20px;width: 255px;height: 21px;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;word-break: break-all;/* border: red 1px solid; */}
</style><body><div class="box9"><div class="box9-1"><span>本周热度</span></div><div class="box9-2"><div class="box9-3"></div></div></div>
</body></html>
<script>let data = [ //本周热榜{word: '凡人修仙传'}, {word: '仙王的日常生活 第二季'}, {word: '爸妈来自二次元'}, {word: '王者？别闹！'}, {word: '烈火浇愁'}, {word: '萌妻食神'}, {word: '国王排名'}, {word: '鬼灭之刃 无限列车篇'}, {word: '世界顶尖的暗杀者,转生为异世界贵族'}, {word: '我被逐出队伍后过上慢生活'}, {word: '平家物语'}, {word: '宿命回响：命运节拍'}, {word: '通灵王'}, {word: '世界尽头的圣骑士'}, {word: '关于前辈很烦人的事'}, {word: '奇巧出租车'}, {word: '进化之实 踏上胜利的人生'}, {word: '黑色四叶草'}, {word: '鬼灭之刃'}, {word: '白沙的水族馆'}, {word: '大正少女御伽话'}, {word: '结城友奈是勇者 第三季 / 大满开之章'}, {word: '名侦探柯南'}, {word: '博人传 火影忍者新时代'}, {word: '咒术回战'}, {word: '迷宫标记者'}, {word: '男孩遇见女孩'},]let box9b = document.querySelector('.box9-2');let data1 = data.slice(0, 12);for (let i = 0; i < data.length; i++) {let arr = ''data1.forEach((b) => {arr += `<div class="box9-3">${b.word}</div>`});box9b.innerHTML = arr}box9b.onscroll = function() {let scrollHeight = document.querySelector(".box9-2").scrollHeight; //滚动条高度// 是div里内容的高度，根据内容的增加和减少变化。let scrollTop = document.querySelector(".box9-2").scrollTop; //可视高度// 是div内里框框的高度，是死的；let p = document.querySelector(".box9-2").clientHeight; //滚动条距离顶部高度// 是滚动条的最上端到，div上端内里框框的高度；if (p > 0) {console.log(p);console.log((p - 324) / 290);console.log("距顶部" + p + "可视区高度" + scrollTop + "滚动条总高度" + scrollHeight);}if (scrollHeight - p <= scrollTop) { //达成这个条件时滚动条触底let data2 = data.slice(0, scrollHeight / 30);let box9b = document.querySelector('.box9-2');for (let i = 12; i < data.length; i++) {let arr1 = '';data2.forEach((b) => {arr1 += `<div class="box9-3">${b.word}</div>`})box9b.innerHTML = arr1console.log("距顶部" + p + "可视区高度" + scrollTop + "滚动条总高度" + (scrollHeight - 1243));}}}
</script>

原生JS JavaScript实现懒加载效果相关推荐

JS实现图片懒加载效果
文章目录前言一.图片实现懒加载步骤二.案例练习(三国女将) 1. html 代码 2. css 代码 3. js 代码执行结果前言懒加载时一种也页面效果,可以提高页面加载速率,并降低服务器 ...
分页组件change_javascript原生瀑布流+图片懒加载组件
我不是天使:javascript原生手动分页组件zhuanlan.zhihu.com 我不是天使:javascript原生自定义轮播图组件zhuanlan.zhihu.com 一大早就去办签证,啦 ...
javascript图片懒加载与预加载的分析
懒加载与预加载的基本概念. 懒加载也叫延迟加载:前一篇文章有介绍:JS图片延迟加载延迟加载图片或符合某些条件时才加载某些图片. 预加载:提前加载图片,当用户需要查看时可直接从本地缓存中渲染. 两种技 ...
JavaScript实现懒加载
文章目录前言一.懒加载是什么? 二.懒加载的特点. 三.懒加载的实现原理. 四.实现懒加载. 五.懒加载结果展示. 总结前言身为开发人员的我们进行项目开发时,不仅仅要对页面进行设计,而且还要考 ...
html 下拉滚动加载,原生js滚动到底部加载数据和下拉刷新 Scrollload
初衷如今移动端站点越来越多,滚动到底部加载数据和下拉刷新的需求非常的常见,即使现在很多pc站点也会有这样的需求,比如百度首页就有.虽然简单的完成这么一个功能非常方便,但是滚动往往会成为性能的瓶颈,处 ...
原生js滚动到底部加载数据和下拉刷新 Scrollload
原文地址 https://github.com/fa-ge/Scrollload/blob/master/README.md 初衷如今移动端站点越来越多,滚动到底部加载数据和下拉刷新的需求非常的常见 ...
js实现图片懒加载原理（marksheng）
有时候一个网页会包含很多的图片,例如淘宝京东这些购物网站,商品图片多只之又多,页面图片多,加载的图片就多.服务器压力就会很大.不仅影响渲染速度还会浪费带宽.比如一个1M大小的图片,并发情况下,达到10 ...
js实现图片懒加载原理
有时候一个网页会包含很多的图片,例如淘宝京东这些购物网站,商品图片多只之又多,页面图片多,加载的图片就多.服务器压力就会很大.不仅影响渲染速度还会浪费带宽.比如一个1M大小的图片,并发情况下,达到10 ...
JS里面的懒加载(lazyload)
懒加载技术(简称lazyload)并不是新技术, 它是js程序员对网页性能优化的一种方案.lazyload的核心是按需加载涉及到图片,falsh资源 , iframe, 网页编辑器(类似FCK)等占 ...
vue打开html自动加载js,vue.js怎么实现懒加载
本文环境:windows7.vue2.9.6,该方法适用于所有品牌的电脑. vue.js实现懒加载的方法: 一.为什么需要懒加载在单页应用中,如果没有应用懒加载,运用webpack打包后的文件将会异 ...

原生JS JavaScript实现懒加载效果

原生JS JavaScript实现懒加载效果相关推荐

最新文章

热门文章