一對一聊天軟體原始碼，提升系統效能的圖片載入方式

云豹科技-苏凌霄發表於2024-05-25
原始碼

一對一聊天軟體原始碼，提升系統效能的圖片載入方式——圖片的懶載入

原理:

由於瀏覽器會自動對頁面中的 img 標籤的 src 屬性傳送請求並下載圖片，可以透過 html5 自定義屬性 data-xxx 先暫存 src 的值，然後在圖片出現在螢幕可視區域的時候，再將 data-xxx 的值重新賦值到 img 的 src 屬性即可

<img src="" alt="" data-src="./images/1.jpg">
<img src="" alt="" data-src="./images/2.jpg">

這裡以 vue-lazyload為例

// 安裝 
npm install vue-lazyload 
    
// main.js 註冊
import VueLazyload from 'vue-lazyload'
Vue.use(VueLazyload)
// 配置項
Vue.use(VueLazyload, {
  preLoad: 1.3,
  error: 'dist/error.png', // 圖片載入失敗時的佔點陣圖
  loading: 'dist/loading.gif', // 圖片載入中時的佔點陣圖
  attempt: 1
})

// 透過 v-lazy 指令使用
<ul>  
    <li v-for="img in list">
        <img v-lazy="img.src" :key="img.src" >
    </li>
</ul>

以上就是一對一聊天軟體原始碼，提升系統效能的圖片載入方式， 更多內容歡迎關注之後的文章

相關文章