Vue圖片懶加載原理和實現

原理分析

• 先將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)
      }
    })
  }
}
複製代碼

main.js

Vue.use(myPlugin, {loading: defaultImg})
複製代碼