问答

Vue写图片懒加载的问题

作者:admin 2021-05-05 我要评论

不使用插件,用Vue写图片懒加载,有什么滚屏事件的语法糖吗 ### 没有,Vue 的设计思路里本来也不包含滚动相关的,它是 MVVM 框架,强调的是数据和视图之间的绑定...

在说正事之前,我要推荐一个福利:你还在原价购买阿里云、腾讯云、华为云服务器吗?那太亏啦!来这里,新购、升级、续费都打折,能够为您省60%的钱呢!2核4G企业级云服务器低至69元/年,点击进去看看吧>>>)

不使用插件,用Vue写图片懒加载,有什么滚屏事件的语法糖吗

###
  1. 没有,Vue 的设计思路里本来也不包含滚动相关的,它是 MVVM 框架,强调的是数据和视图之间的绑定
  2. 不过你可以用 <img loading="lazy">,目前大部分现代化浏览器都支持。
###

interSectionObserver

###

`

// IntersectionObserver 这是浏览器内置的一个API,实现了监听window的scroll事件、判断是否在视口中以及节流三大功能。
let img = document.document.getElementsByTagName("img");

const observer = new IntersectionObserver(changes => {
  //changes 是被观察的元素集合
  for(let i = 0, len = changes.length; i < len; i++) {
    let change = changes[i];
    // 通过这个属性判断是否在视口中
    if(change.isIntersecting) {
      const imgElement = change.target;
      imgElement.src = imgElement.getAttribute("data-src");
      // 取消监听
      observer.unobserve(imgElement);
    }
  }
})
observer.observe(img);`

版权声明:本文转载自网络,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。本站转载出于传播更多优秀技术知识之目的,如有侵权请联系QQ/微信:153890879删除

相关文章
  • Vue写图片懒加载的问题

    Vue写图片懒加载的问题

  • python 查询数据库报错不知道为啥

    python 查询数据库报错不知道为啥

  • Rust开发移动端app?

    Rust开发移动端app?

  • 一个进程,如果能被 ctrl-C 杀死,是不

    一个进程,如果能被 ctrl-C 杀死,是不

腾讯云代理商
海外云服务器