辽宁建设厅网站首页,福田市网站建设推广,永久免费轻量服务器,国内房地产设计网站建设Ⅰ、前言
「懒加载」是网页中非常 常见的#xff1b;为了减少系统的压力#xff0c;对于一些电商系统出场频率非常高#xff1b;那么大家一般用什么方式去实现 「懒加载」 呢 #xff1f; ① 通过 scroll 的形式#xff1a; 通过 滚动「scroll」事件#xff0c;然后去判…Ⅰ、前言
「懒加载」是网页中非常 常见的为了减少系统的压力对于一些电商系统出场频率非常高那么大家一般用什么方式去实现 「懒加载」 呢 ① 通过 scroll 的形式 通过 滚动「scroll」事件然后去判断距离当 距离到达一定范围判断是否要加载资源 ② 通过 IntersectionObserver 的形式 通过 元素与设备视窗或者其他指定元素发生交集的时候 「最底部的元素滚动到视口时」 判断是否要加载资源 优势
「IntersectionObserver」不像「scroll」事件触发那么频繁 对系统压力更小 不用计算距离使用起来更加简单
Ⅱ、概念与用法
IntersectionObserver 构造函数需要传入一个回调函数当 「首次加载」或 「元素与视窗发生交集 (或指定元素) 」 会执行这个回调函数通过 observer 方法给定一个元素观察 const observer new IntersectionObserver(callback);observer.observe(dom);Ⅲ、用交叉观察器实现懒加载
首先我们创建 content 用存放内容每次加载再向其中加入更多内容 用 交叉观察器IntersectionObserver 监听 footer 标签 首次触发一下当 footer 滚动到页面上时然后写一个 添加的方法例 addItem每次添加10条内容;过程如下
bodydiv classcontent/divfooter 加载中。。。 /footer
/body
scriptconst footer document.getElementsByTagName(footer)[0]const observer new IntersectionObserver((val) {addItem();});observer.observe(footer);const content document.getElementsByClassName(content)[0]let num 0;function addItem() {for (let i num; i num10; i) {let node document.createElement(div);node.innerText 第${i1}列node.className itembox.appendChild(content)}num num 10;}
/script查看效果 再添加一点样式 完整例子
!DOCTYPE html
html langen
headmeta charsetUTF-8titleDocument/title
/head
style.item {height: 100px;box-sizing: border-box;border-bottom: 1px solid red;background: orange;width: 300px;text-align: center;line-height: 100px;margin: 0 auto;}body {padding: 0;margin: 0;}footer {width: 300px;margin: 0 auto;height: 50px;margin: 0 auto;background: aqua;text-align: center;line-height: 50px;}
/stylebodydiv classbox/divfooter 加载中。。。 /footer
/body
scriptconst footer document.getElementsByTagName(footer)[0]const observer new IntersectionObserver((val) {setTimeout(addItem, 300);});observer.observe(footer);const box document.getElementsByClassName(box)[0]let num 0;function addItem() {for (let i num; i num 10; i) {let node document.createElement(div);node.innerText 第${i 1}列node.className itembox.appendChild(node)}num num 10;}
/script
/html
