vue如何實(shí)現(xiàn)圖片懶加載

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

圖片懶加載

圖片懶加載就是對(duì)于有很多圖片的頁(yè)面，為了提高頁(yè)面加載速度，只加載可視區(qū)域內(nèi)的圖片，可視區(qū)域外的等到滾動(dòng)到可視區(qū)域后再去加載

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

推薦一個(gè)第三方插件 vue-lazyload

npm i vue-lazyload -S

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

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

或者自己造輪子，手動(dòng)封裝一個(gè)自定義指令，這里封裝好了一個(gè)兼容各瀏覽器的版本的，主要是判斷瀏覽器支不支持 IntersectionObserver API，支持就用它實(shí)現(xiàn)懶加載，不支持就用監(jiān)聽 scroll 事件+節(jié)流的方式實(shí)現(xiàn)

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監(jiān)聽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)
}, 
// 監(jiān)聽scroll事件
listenerScroll(el) {  
 const handler =
LazyLoad.throttle(LazyLoad.load, 300) 
 LazyLoad.load(el)  
 window.addEventListener('scroll', () => {   
  handler(el) 
 })
}, 
// 加載真實(shí)圖片 
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')  
  } 
 }
}, 
// 節(jié)流 
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" />

關(guān)于“vue如何實(shí)現(xiàn)圖片懶加載”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，使各位可以學(xué)到更多知識(shí)，如果覺得文章不錯(cuò)，請(qǐng)把它分享出去讓更多的人看到。