【懒加载】监听视图是否到达可视区域

前言

功能参考饿了么的图片组件里的懒加载图片（地址）
想要实现在快滚动到底部的时候去动态加载图片，前面写到过的监听滚动条去做懒加载也可以做到，但是想用更优雅的写法来实现，即用本地占位图片来替换网络图片，当视图加载到占位图片的视图的时候，将占位图片替换成网络图片。
这样做的好处是当你开发一个图片量比较多的项目的时候，不必等所有的图片都加载完成了才能友好访问，可以直接加载当前可视区域里的图片，其他区域的内容可以等滚动到当前视图之前加载。这样可以提高网站的友好体验，不必等那个几秒加载完成。
那么，怎么能做到监听懒加载的视图到达可视区域呢？

已经有原生支持监听可是区域的功能了，它就是IntersectionObserver

IntersectionObserver

mdn
先查看兼容情况

目前绝大多数浏览器都支持的差不多了，除了ie（毕竟巨硬都放弃了）那就没必要考虑了吧！
上面的mdn里有介绍intersectionObserver有两个形参，一个是回调函数，第二个是可选的配置项；

回调函数
回调函数有两个形参，第一个是entries， entries是一个数组，每个成员都是一个IntersectionObserverEntry对象
如果同时有两个被观察的对象的可见性发生变化，entries数组就会有两个成员；第二个参数是当前被调用的IntersectionObserver实例
配置项
root 详见mdn
rootMargin 详见mdn
threshold 重点说下threshold，它是一个具体的数值或者是一个数值的数组，值为0-1之间。0 代表视图即将加载到可视区域之前，而1则是视图（视图的高度）完完全全加载到可视区域了。没有修改配置的话默认该项都是0，即马上就到可视区域了去触发回调。

实例

     <div class="banner"></div><div class="content"></div><div class="img"><span>loading</span></div><style>div, body, html {padding: 0;margin: 0;}.banner {width: 100%;height: 100vh;background-color: aqua;}.content {height: 200px;background-color: aquamarine;}.img {min-height: 300px;background-color: aliceblue;text-align: center;}.img>span {line-height: 300px;font-size: 50px;}</style><script>const img = document.querySelector('.img');const observer = new IntersectionObserver((e, self) => {console.log(e)const status = e.some(item => item.intersectionRatio > 0);if (status) {createImgEle();if (e.some(el => el.target === img)) self.unobserve(img)}}, {threshold: 0})observer.observe(img);function createImgEle() {const imgctx = document.createElement('img');const loading = document.querySelector('.img>span');imgctx.src = 'https://img2.baidu.com/it/u=4084621093,2971972319&fm=253&fmt=auto&app=120&f=JPEG?w=889&h=500';img.append(imgctx);img.removeChild(loading)}</script>

这里以懒加载一张图片为例，当加载到div.img时会执行callback回调去生成一个新的img元素（其实一开始是打算不创建img 只替换img.src的，但没有找到那张Loading图片，就手动创建了个img来替换。。。）

更高级的用法比如注册成vue的自定义指令（感谢春神提供的素材）

【懒加载】监听视图是否到达可视区域相关推荐

android动画超出圆角,Android关于Glide的使用(高斯模糊、加载监听、圆角图片)
高斯模糊.加载监听.圆角图片这些相信大家都很熟悉,那如何实现这些效果,请大家参考本文进行学习. 1.引用 compile 'com.github.bumptech.glide:glide:3.7.0' ...
Oracle 外部表加载监听日志,使用外部表访问监听日志
某天工作是使用外部表加载监听日志信息,观察并分析用户连接数变化趋势按照eygle循序渐进oracle的教程一步步进行: 测试使用外部表先创建目录: connect / as sysdba crea ...
js - 预加载+监听图片资源加载制作进度条
这两天遇到一个新需求:一个一镜到底的h5动画.因为功能的特殊性,就要求我们提前监听页面的静态图片是否全部加载完毕.即处理预加载. 总结下来,下次这种需求需要提前注意以下几点: 一.图片而不是背景图本 ...
聊一聊前端图片懒加载背后的故事
本文内容什么是懒加载如何实现懒加载监听滚动事件 IntersectionObserver 浏览器原生方案本文小结相信大家已经注意到我博客有了一点变化,因为博主最近利用空闲时间对博客进行了优化 ...
图片懒加载及Vue自定义图片懒加载指令
文章目录监听滚动的方式 IntersectionObserver方式自定义图片懒加载vue指令1 自定义图片懒加载vue指令2 lazyLoadImage.js main.js中注册指令组件中使 ...
图片懒加载 lazyload
目录了解代码效果了解图片懒加载是一种网页性能优化的方法,能够极大的提升用户的体验效果,现代一张图片都有可能是几兆的问题,加入100张图片你进入页面难道就直接全部请求,这得要多卡,所以使用图片 ...
Vue3电商项目实战-首页模块7【26-首页主体-商品区块、27-首页主体-最新专题、28-首页主体-图片懒加载】
文章目录 26-首页主体-商品区块 27-首页主体-最新专题 28-首页主体-图片懒加载 26-首页主体-商品区块目的: 完成商品区域展示. 大致步骤: 准备一个商品盒子组件 home-goods ...
js图片懒加载原理、实现及节流优化
1.懒加载原理在图片没有进入可视区域时,先给的src一个默认加载的图片,这样浏览器就不会发送请求了,等到图片进入可视区域再把真实的图片路径data-src给src. 2.具体实现 1. 效果 2. ...
【Web技术】1206- 如何设计一款支持懒加载的瀑布流组件？
前言瀑布流布局算是一种比较流行的布局,参差不齐的多列结构,不仅能节省空间,还能在视觉展示上错落有致不拘一格.在一次业务需求中,找了几个开源的瀑布流组件,在使用的过程中总会有点小问题,便开发了此组件. ...

【懒加载】监听视图是否到达可视区域

【懒加载】监听视图是否到达可视区域相关推荐

最新文章

热门文章