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

分享一個基於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)