vue 图片懒加载

最新推荐文章于 2024-09-30 16:19:08 发布

王小二搬砖

最新推荐文章于 2024-09-30 16:19:08 发布

阅读量41

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_23863101/article/details/133777179

版权

1.
Vue.directive('lazy', (el, binding) => {
let oldSrc = el.src //保存旧的src，方便后期渲染时候赋值src真实路径
el.src = "" //将渲染的src赋为空，则不会渲染图片出来
let observer = new IntersectionObserver(([{ isIntersecting }]) => { // 调用方法得到该elDOM元素是否处于可视区域
if (isIntersecting) { //回调是否处于可视区域，true or false
el.src = oldSrc //如果处于可视区域额，将最开始保存的真实路径赋予DOM元素渲染
observer.unobserve(el) // 只需要监听一次即可，第二次滑动到可视区域时候不在监听
}
})
observer.observe(el) // 调用方法

export default {
  mounted() {
    const lazyImages = document.querySelectorAll('img');
    function lazyLoad() {
      lazyImages.forEach(img => {
        const rect = img.getBoundingClientRect();
        if (rect.top < window.innerHeight && rect.bottom >= 0 && !img.src) {
          img.src = img.dataset.src;
        }
      });
    }
    window.addEventListener('scroll', lazyLoad);
  },
};

window.addEventListener('scroll', () => {

load(el) {  
 const windowHeight =
document.documentElement.clientHeight
 const elTop = el.getBoundingClientRect().top  
 const elBtm = 
el.getBoundingClientRect().bottom 
 const realSrc = el.dataset.src  
 if (elTop - windowHeight < 0 && elBtm > 0) {  
  if (realSrc) {     
   el.src = realSrc    
   el.removeAttribute('data-src')  
  } 
 }
},

})