vue如何實現圖片懶加載

這篇文章將為大家詳細講解有關vue如何實現圖片懶加載，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

圖片懶加載

圖片懶加載就是對于有很多圖片的頁面，為了提高頁面加載速度，只加載可視區域內的圖片，可視區域外的等到滾動到可視區域后再去加載

這個功能一些 UI 框架都有自帶的，如果沒有呢？

推薦一個第三方插件 vue-lazyload

npm i vue-lazyload -S

// main.js
import VueLazyload from 'vue-lazyload'
Vue.use(VueLazyload)

// 接著就可以在頁面中使用 v-lazy 懶加載圖片了
<img v-lazy="/static/images/1.png">

或者自己造輪子，手動封裝一個自定義指令，這里封裝好了一個兼容各瀏覽器的版本的，主要是判斷瀏覽器支不支持 IntersectionObserver API，支持就用它實現懶加載，不支持就用監聽 scroll 事件+節流的方式實現

const LazyLoad = { 
// install方法 
install(Vue, options) {  
 const defaultSrc = options.default 
 Vue.directive('lazy', {  
  bind(el, binding) {   
   LazyLoad.init(el, binding.value, defaultSrc) 
 },   
  inserted(el) {     
   if (IntersectionObserver) {    
    LazyLoad.observe(el)     
  } else {      
    LazyLoad.listenerScroll(el)    
  }  
 }, 
})
}, 
// 初始化 
init(el, val, def) { 
 el.setAttribute('data-src', val)  
 el.setAttribute('src', def)
}, 
// 利用IntersectionObserver監聽el
observe(el) {  
 var io = new IntersectionObserver((entries) => {  
  const realSrc = el.dataset.src    
 if (entries[0].isIntersecting) {   
  if (realSrc) {      
   el.src = realSrc       
   el.removeAttribute('data-src')    
  }   
 } 
}) 
 io.observe(el)
}, 
// 監聽scroll事件
listenerScroll(el) {  
 const handler =
LazyLoad.throttle(LazyLoad.load, 300) 
 LazyLoad.load(el)  
 window.addEventListener('scroll', () => {   
  handler(el) 
 })
}, 
// 加載真實圖片 
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')  
  } 
 }
}, 
// 節流 
throttle(fn, delay) {  
 let timer  
 let prevTime  
 return function (...args) {   
  const currTime = Date.now() 
  const context = this    
  if (!prevTime) prevTime = currTime  
  clearTimeout(timer)   
  
  if (currTime - prevTime > delay) {     
   prevTime = currTime      
   fn.apply(context, args)    
   clearTimeout(timer)      
   return   
 }  

 timer = setTimeout(function () {   
  prevTime = Date.now()  
  timer = null   
  fn.apply(context, args)   
}, delay) 
}
},
}
export default LazyLoad

使用上是這樣的，用 v-LazyLoad 代替 src

<img v-LazyLoad="xxx.jpg" />

關于“vue如何實現圖片懶加載”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。