intersectionObserver 解决目标元素与视口产生一个交叉区，所以这个 API 叫做 交叉观察器，比如在 Web 网页开发中，常常需要了解某个元素是否进入了视口（viewport），即用户能不能看到它。传统的实现方法是，监听到 scroll 事件后，调用目标元素（绿色方块）的 getBoundingClientRect() 方法，得到它对应于视口左上角的...
使用IntersectionObserver类构造函数,去判断元素是否进入视口 IntersectionObserver是一个非常强大的api,可以观测很多东西的变化,very good,在浏览器版本不断更新迭代的现在,其兼容性已经非常不错了,大家可以放心使用。 关于IntersectionObserver的语法,笔者不赘述了,咱们直接上自定义指令代码 自定义指令代码 // let loadimage ...
1.新建plugin.js文件: constLazyLoadPlugin={install(Vue){Vue.directive('lazy',{// 在绑定元素插入到 DOM 中inserted:function(el,binding){// IntersectionObserver API 检测元素是否进入视口constobserver=newIntersectionObserver(entries=>{if(entries[0].isIntersecting){// 加载图片el.src=binding.value;// 停止...
可以通过VueUse中的useIntersectionObserver和原生的IntersectionObserver api来简化判断图片是否进入可视区域,下面就分别通过这两种简化的方式来实现一个自定义的懒加载指令。 2.1 使用useIntersectionObserver useIntersectionObserver是VueUse提供的一个方法,那么VueUse 是什么? 一款基于Vue组合式API的函数工具集。 以上是官方网站...
IntersectionObserver是一个非常强大的api,可以观测很多东西的变化,very good,在浏览器版本不断更新迭代的现在,其兼容性已经非常不错了,大家可以放心使用。 关于IntersectionObserver的语法,笔者不赘述了,咱们直接上自定义指令代码 自定义指令代码 // let loadimage = "http://ashuai.work:10000/imgGifSrc/loading.gif"...
懒加载图片指令完整的指令实现,可以在 vue3-lazy 中查看, 在我的课程《Vue3 开发高质量音乐 Web app》中也有应用。 懒加载图片指令的核心是应用了IntersectionObserverAPI 来判断图片是否进入可视区,该特性在现代浏览器中都支持,但 IE 浏览器不支持,此时可以通过监听图片可滚动父元素的一些事件如scroll、resize等,然后...
这个功能主要的底层逻辑是是使用IntersectionObserver API,IntersectionObserver用于在浏览器中观察元素的可见性和位置变化。它可以帮助开发者实现一些动态行为,如图片的懒加载、无限滚动等。 简单的示例如下: // 创建IntersectionObserver实例 constobserver =newIntersectionObserver((entries, observer) =>{ ...
使用Intersection Observer懒加载图片 步骤1: 创建Intersection Observer 在你的Vue组件中创建Intersection Observer: export default { mounted() { const observer = new IntersectionObserver((entries) => { entries.forEach(entry => { if (entry.isIntersecting) { ...
const observer=newIntersectionObserver(loadImage, { root:null, rootMargin:'0px', threshold:0.1, }); onMounted(()=>{ images.value=document.querySelectorAll(imageSelector); images.value.forEach(img=>{ observer.observe(img); }); });