前言
圖片懶加載是一個很常用的功能，特別是一些電商平臺，這對性能優化至關重要。今天就用vue來實現一個圖片懶加載的插件。 這篇博客采用“三步走”戰略――Vue.use()、Vue.direction、Vue圖片懶加載插件實現，逐步實現一個Vue的圖片懶加載插件。
Vue.use()
就像開發jQuery插件要用$.fn.extent()一樣，開發Vue插件我們要用Vue.use()。其實就是官方內部實現的一個方法，供廣大開發者靈活開發屬于自己的插件。只需要按照約定好的規則開發就行。
用法
安裝 Vue.js 插件。如果插件是一個對象，必須提供 install 方法。如果插件是一個函數，它會被作為 install 方法。install 方法調用時，會將 Vue 作為參數傳入。
該方法需要在調用 new Vue() 之前被調用。
當 install 方法被同一個插件多次調用，插件將只會被安裝一次。
注：install方法或者被當做install方法的方法它的第一個參數是 Vue 構造器，第二個參數是一個可選的選項對象。
參考鏈接：
Vue.direction自定義指令
用法――全局注冊和局部注冊
全局注冊
// 注冊一個全局自定義指令 `v-focus`Vue.directive('focus', { // 當被綁定的元素插入到 DOM 中時…… inserted: function (el) { // 聚焦元素 el.focus() }})局部注冊
directives: { focus: { // 指令的定義 inserted: function (el) { el.focus() } }}鉤子函數
一個指令定義對象可以提供如下幾個鉤子函數 (均為可選)：
鉤子函數的參數
參考鏈接：https://cn.vuejs.org/v2/guide/custom-directive.html
Vue圖片懶加載插件實現
思路：事先提供倆個空數組listenList（收集未加載的圖片元素和資源）和imageCacheList（收集已加載的圖片資源）。然后，判斷圖片是否到達可視區，如果到達，則用Image對象去加載資源圖片，加載完畢后賦值給綁定元素的src讓其顯示。同時，將加載過的資源放入imageCacheList數組，用isAlredyLoad方法做個判斷，防止之后相同的資源重復加載。如果沒到達，則將元素和資源對象放到listenList數組，最后進行滾動監聽。監聽listenList數組中的元素是否可以加載資源。
插件的實現：
// 引入Vue構造函數import Vue from 'vue'var lazyload = { // Vue.use() 默認加載install,并且將Vue當做第一個參數傳遞過來 install(vue,payload) { // 數組擴展移除元素 if(!Array.prototype.remove){ Array.prototype.remove = function(item){ if(!this.length) return var index = this.indexOf(item); if( index > -1){ this.splice(index,1); return this } } } // 默認值圖片 var defaultImage = payload.defaultImage || 'https://gw.alicdn.com/tps/i1/TB147JCLFXXXXc1XVXXxGsw1VXX-112-168.png'; var errorImage = payload.errorImage || 'https://gw.alicdn.com/tps/i1/TB147JCLFXXXXc1XVXXxGsw1VXX-112-168.png'; // 默認離可視區10px時加載圖片 var distanece = payload.scrollDistance || 10; // 收集未加載的圖片元素和資源 var listenList = []; // 收集已加載的圖片元素和資源 var imageCacheList = []; // 是否已經加載完成的圖片 const isAlredyLoad = (imageSrc) => { if(imageCacheList.indexOf(imageSrc) > -1){ return true; }else{ return false; } } //檢測圖片是否可以加載，如果可以則進行加載 const isCanShow = (item) =>{ var ele = item.ele; var src = item.src; //圖片距離頁面頂部的距離 var top = ele.getBoundingClientRect().top; //頁面可視區域的高度 var windowHeight = window.innerHight; // top - distance 距離可視區域還有distance像素 if(top - distanece < window.innerHeight){ var image = new Image(); image.src = src; image.onload = function() { ele.src = src; imageCacheList.push(src); listenList.remove(item); } image.onerror = function() { ele.src = errorImage; imageCacheList.push(src); listenList.remove(item); } return true; }else{ return false; } }; const onListenScroll = () => { window.addEventListener('scroll',function(){ var length = listenList.length; for(let i = 0;i<length;i++ ){ isCanShow(listenList[i]); } }) } //Vue 指令最終的方法 const addListener = (ele,binding) =>{ //綁定的圖片地址 var imageSrc = binding.value; // 防止重復加載。如果已經加載過，則無需重新加載，直接將src賦值 if(isAlredyLoad(imageSrc)){ ele.src = imageSrc; return false; } var item = { ele: ele, src: imageSrc } //圖片顯示默認的圖片 ele.src = defaultImage; //再看看是否可以顯示此圖片 if(isCanShow(item)){ return } //否則將圖片地址和元素均放入監聽的lisenList里 listenList.push(item); //然后開始監聽頁面scroll事件 onListenScroll(); } Vue.directive('lazyload',{ inserted: addListener, updated: addListener }) }}export default lazyload;插件的調用：
import Vue from 'vue'import App from './App'import router from './router'import Lazyload from './common/js/lazyload'// 參數均為可選Vue.use(Lazyload,{ scrollDistance: 15, // 距離可視區還有15px時開發加載資源 defaultImage: '', // 資源圖片未加載前的默認圖片（絕對路徑） errorImage:'' // 資源圖片加載失敗時要加載的資源（絕對路徑）})參考鏈接：http://www.survivalescaperooms.com/article/112355.htm
總結
以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作具有一定的參考學習價值，謝謝大家對武林網的支持。
新聞熱點
疑難解答
