Vue图片懒加载原理和实现

最新推荐文章于 2025-02-12 13:14:26 发布

黄不逗

最新推荐文章于 2025-02-12 13:14:26 发布

阅读量1.7k

点赞数

分类专栏： Vue 系列文章标签： javascript vue.js html5

原文链接：https://www.jianshu.com/p/57e1055cc3fb

版权

Vue 系列专栏收录该内容

19 篇文章

订阅专栏

本文详细介绍了如何利用JavaScript和Vue.js实现图片懒加载功能。通过监听窗口滚动事件，当图片进入可视区域时，再加载其实际src，从而提高网页性能。文中提供了一个Vue插件，用于绑定图片的懒加载指令，并模拟了网络请求延迟。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

原理分析

先将img标签的src链接设为同一张图片(默认图片)，当js监听到该图片进入可视窗口时，再将实际地址应用。

实现方法

判断元素是否在可视范围

  /**
 * 判断元素是否在可视范围
   */
  function isVisible(ele){
    let windowHeight = window.innerHeight
    let position = ele.getBoundingClientRect()
    // 当元素的top偏移量小于页面大小并且大于高度的负数
    if(position.top<windowHeight && position.top>-position.height){
      return true
    }
    return false
  }

对图片实现懒加载

  /**
 * 对图片进行懒加载
   */
  function lazyLoad(img, src){
    if(img && src && isVisible(img)){ // 元素存在，元素未被加载，元素可见
      setTimeout(function(){
        img.setAttribute('src', src)
      }, 1000) // 模拟网络请求
    }
  }

添加滚动监听

  // 窗口滚动
  window.addEventListener('scroll', function(){
    lazyLoad(img, src)
  })

Vue插件实现代码

/**
 * 判断元素可见
 */
function isVisible(el){
  let windowHeight = window.innerHeight
  let position = el.getBoundingClientRect()
  // 当元素的top偏移量小于页面大小并且大于高度的负数
  if(position.top<windowHeight && position.top>-position.height){
    return true
  }
  return false
}

/**
 * 对图片进行懒加载
 */
function lazyLoad(img, src){
  if(img && src && isVisible(img)){ // 元素存在，元素未被加载，元素可见
    setTimeout(function(){
      img.setAttribute('src', src)
    }, 1000) // 模拟网络请求慢的情况
  }
}

export default {
  install(Vue, options){
    Vue.directive('lazy', {
      bind: function(el, binding, vnode){
        el.setAttribute('src', options.loading)
        window.addEventListener('scroll', function(){
          lazyLoad(el, binding.value)
        })
      },
      inserted: function(el, binding, vnode){
        lazyLoad(el)
      }
    })
  }
}

原文链接：https://www.jianshu.com/p/57e1055cc3fb