超智慧vue圖片懶載入之指令化管理（vue-img-lazy-load）

Vitaminaq發表於2019-02-27
Vue

分享一個基於vue的圖片懶載入的指令外掛，使用起來也是極其簡易。 圖片的懶載入，可以減少首頁首次載入的數量，減少伺服器的壓力，優化使用者體驗，有點就不多提了，所以在app裡使用圖片懶載入是很必要的。

安裝/Install

npm install vue-images-lazy-load --save
複製程式碼

使用/Use

全域性註冊/Global registration (main.js)

import VueImgLazyLoad from 'vue-images-lazy-load';
// default
Vue.use(VueImgLazyLoader);
// options
Vue.use(VueImgLazyLoader, {
    observerOptions: {
	rootMargin: '0px 0px -400px 0px',
	threshold: 0.5
    },
    delayTime: 1000
});
複製程式碼
options
  • oberserOptions: 觀察者引數配置。
    rootMargin：可以區域範圍，比如："0px 0px -100px 0px",則為元素超出視窗底部100px被視為可見；預設'0px'
    threshold(0-1)： 元素達到視窗設定的rootMargin，還要加上自身的百分比被視為可見；預設0
  • delayTime :給圖片新增延時載入的時間,default: (500 + Math.random() * 500)
  • oberserOptions: observer parameter configuration.
    rootMargin：areas such as "0px 0px-100px 0px" are considered visible if the element exceeds 100px at the bottom of the window; default is'0px'.
    threshold(0-1)：elements that reach the rootMargin of the window settings, plus their own percentages, are considered visible; default 0
  • delayTime : add a delay loading time to the picture,default: (500 + Math.random() * 500)

tips

最開始的名字有衝突，所以使用了vue-images-lazy-load
The initial name was conflicting, so vue-images-lazy-load was used.

區域性註冊/Partial registration (*.vue)

import { directive } from 'vue-images-lazy-load';
directives: {
    'img-lazy-load': directive
}
複製程式碼

*.vue

使用預設配置/use default config
<img :src="baseUrl" v-img-lazy-load />
複製程式碼

引數配置/Parameter configuration

  • url:替換外掛預設的展點陣圖，格式請用base64格式，或者提起解析好的(require,import)，或者cdn地址
    url: Replace the default booth map of the plug-in, in base64 format, or mention parsed(require,import) or CDN address.
<img :src="baseUrl" v-img-lazy-load="{url: ''}" />
複製程式碼

沒有太多複雜的引數配置，使用起來非常簡單輕便。如果覺得有點用的同學歡迎start，有什麼問題也歡迎討論，專案基於typescript，歡迎同學們檢視。

專案地址：github.com/Vitaminaq/v…

使用的專案地址：github.com/Vitaminaq/c…(專案基於typescript，歡迎start)

相關文章