2. 程式人生 > >前端入門之(vue圖片載入框架完結)

前端入門之(vue圖片載入框架完結)

阿新 • • 發佈：2018-11-29

前言: 2018已經過了一大半了,並沒有感覺在本命年中有啥不順的,每天過得還是挺開心的��,很感謝身邊的朋友一路的陪伴,感恩!! 已經半年多沒回家了,不久前跟麻麻發了一個視訊,跟過年比,家裡妹妹長了10cm,麻麻瘦了10kg,我家狗狗從小奶狗長到了30kg了,麻麻說:“你鬍子長了要刮一颳了” ��! 才發現自己真的不小了~~為夢想歷經滄桑、閱盡千帆、歸去才發現自己早已非少年了啊!!! 不逼逼了,進入我們今天的主題哈~

前面已經寫過兩篇同系列的文章了,感興趣的童鞋可以去看看哈,h5剛起步,文章純屬於個人學習筆記,大牛勿噴!

前端入門之(vue圖片載入框架一)
前端入門之(vue圖片載入框架二)

前端入門之(vue圖片載入框架二)中最後我們已經實現了框架的基本功能,也就是placeholder(loading跟error)佔位圖效果.
[圖片上傳失敗…(image-6288f8-1533729480712)]

最後還留了一個問題:
當我們的圖片很多的時候,我們只需要載入我們看到的部分,當滑動到其它部分的時候再去載入(以時間換空間),現在我們是直接一出來就載入全部圖片(以空間換時間), 如果是在pc端的話,我們可以直接載入全部,這樣快,而且pc上貌似記憶體問題還不是很大的問題,但是當到手機端的時候,記憶體的佔用直接影響的是使用者體驗,所以我們需要用懶載入的方式去載入圖片

我們先看一下如果我們直接載入幾張圖片會怎麼樣?

<template>
  <div class="opt-container">
    <img v-lazy="{src: image}" v-for="(image,index) in images" v-bind:key="'image-'+index">
  </div>
</template>

<script>
  const IMAGES = [
    'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1533137283186&di=c136f7387cfe2b79161f2f93bff6cb96&imgtype=0&src=http%3A%2F%2Fpic1.cxtuku.com%2F00%2F09%2F65%2Fb3468db29cb1.jpg'
 
,
    'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1533137283186&di=de941561df3b6fd53b2df9bfd6c0b187&imgtype=0&src=http%3A%2F%2Fpic43.photophoto.cn%2F20170413%2F0008118236659168_b.jpg',
    'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1533137283185&di=aff7e8aa60813f6e36ebc6f6a961255c&imgtype=0&src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F01d60f57e8a07d0000018c1bfa2564.JPG%403000w_1l_2o_100sh.jpg',
    'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1533726597165&di=198b9836a377021082281fcf0e5f3331&imgtype=0&src=http%3A%2F%2Fchongqing.sinaimg.cn%2Fiframe%2F159%2F2012%2F0531%2FU9278P1197T159D1F3057DT20140627094648.jpg',
    'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1533726597167&di=e06fc5f74fac9bb61d229249219cbe4f&imgtype=0&src=http%3A%2F%2Fimg2.ph.126.net%2FuWKrNCkdBNBPzdjxCcUl-w%3D%3D%2F6630220042234317764.jpg'
  ]
  export default {
    name: 'Lazy',
    data() {
      return {
        images: IMAGES,
        showImage: true
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .opt-container {
    font-size: 0px;
  }
</style>

可以看到,我們程式碼很簡單,就是直接載入了5張圖片,然後我們看一下流量消耗:

螢幕快照 2018-08-08 下午4.44.01.png

可以看到,我們消耗了1.3MB的流量,而且所有圖片都在同一時間載入的,這才5張圖片,在專案中,我們一個頁面幾百張圖片也不是不可能哈,所以想想就有點恐怖,放到pc還好,手機上估計是要哭的節奏~ 所以我們考慮一下,當我們滑動的時候,我們滑動看到的圖片才讓它載入,地下未滑到圖片我們就暫時不載入了.我們來試試哈~~

首先是監聽窗體的滾動,因為我們這裡是直接是body在滾動,所以,我們直接監聽:

 mounted(){
      window.onscroll=()=>{
        console.log(window.scrollY);
      }
    }

然後我們滑動窗體:
螢幕快照 2018-08-08 下午5.01.26.png
所以我們需要在onscroll中通知所有的listener(經紀人),問一下他:“我們現在到這個位置了,你需要不需要載入?”,我們首先得通知manager(經理),然後由manager去通知listener(經紀人):
首先通知LazyDelegate,那麼我們怎麼拿到LazyDelegate引用呢? 我們可以在install方法執行的時候傳給Vue的prototype,這樣每個vue的例項都會有LazyDelegate的引用了:

import lazyDelegate from './LazyDelegate';

export default {
  install(Vue, options = {}) {
    let LazyClass = lazyDelegate(Vue);
    let lazy = new LazyClass(options);
    Vue.prototype.$Lazyload = lazy
   ...
  }
}

然後在我們demo的vue檔案中:

 mounted(){
      window.onscroll=()=>{
        this.$Lazyload.lazyLoadHandler();
      }
    }

然後我們經理的lazyLoadHandler方法就會一個一個通知listener去載入圖片.

 /**
     * 通知所有的listener該幹活了
     * @private
     */
    _lazyLoadHandler() {
      //找出哪些是已經完成工作了的
      const freeList = []
      this.ListenerQueue.forEach((listener, index) => {
        if (!listener.state.error && listener.state.loaded) {
          return freeList.push(listener)
        }
        listener.load()
      })
      //把完成工作的listener剔除
      freeList.forEach(vm => remove(this.ListenerQueue, vm))
    }

我們在_lazyLoadHandler打個log,當我們滑動窗體的時候:

螢幕快照 2018-08-08 下午6.16.08.png

我們可以看到.回調了我們的_lazyLoadHandler方法,進而就會去通知所有的listener去載入圖片:

_lazyLoadHandler() {
      ....
      this.ListenerQueue.forEach((listener, index) => {
        if (!listener.state.error && listener.state.loaded) {
          return freeList.push(listener)
        }
        listener.load()
      })
    ...
    }

前面我們說了,滑動的時候,通知listener載入圖片還有一個條件,當前img是否在窗體內,是否可以見?
所以我們需要加一個判斷:

_lazyLoadHandler() {
      ....
      this.ListenerQueue.forEach((listener, index) => {
        if (!listener.state.error && listener.state.loaded) {
          return freeList.push(listener)
        }
       if(是否在窗體內,是否可以見?){
          listener.load()
        }
      })
    ...
    }

轉換成程式碼就是:


    /**
     * 通知所有的listener該幹活了
     * @private
     */
    _lazyLoadHandler() {
      //找出哪些是已經完成工作了的
      console.log('_lazyLoadHandler');
      const freeList = []
      this.ListenerQueue.forEach((listener, index) => {
        if (!listener.state.error && listener.state.loaded) {
          return freeList.push(listener)
        }
        //判斷是否在窗體內，不在就不去載入圖片了
        if(!listener.checkInView())return;
        listener.load()
      })
      //把完成工作的listener剔除
      freeList.forEach(vm => remove(this.ListenerQueue, vm))
    }

listener.js:

 getRect() {
    this.rect = this.el.getBoundingClientRect()
  }

  checkInView() {
    this.getRect()
    return (this.rect.top < window.innerHeight && this.rect.bottom > 0
      && this.rect.left < window.innerWidth && this.rect.right > 0)
  }

我們修改一下Lazy.vue測試頁面,給img一個定高,不然預設都載入了:

<div v-for="(image,index) in images" v-bind:key="'image-'+index">
      <img v-lazy="{src: image}" width="100%" height="500px">
    </div>

然後給LazyDelegate加一個log提示:

_lazyLoadHandler() {
     ..
        //判斷是否在窗體內，不在就不去載入圖片了
        if(!listener.checkInView())return;
        console.log(listener.src+'可以載入了');
        listener.load()
      })
     ...
    }

我們跑一下程式碼看一下效果:

2.gif

我們可以看到log,當我們滑動的時候當快滑動到某個img的時候,我們才去載入當前img,我們對比一下流量消耗:
螢幕快照 2018-08-08 下午6.36.14.png

可以看到,效果還是很明顯的第一屏的時候只有739kb了,哈哈.其實也沒有啥牛逼的東西,只是換了種載入模式而已,我們之前是以空間換時間,現在變成了以時間換空間, 很明顯,第二種是比較符合移動端策略的.

有童鞋會說了,你既然是框架,為啥還把滾動的監聽放在元件中呢? 還有,你怎麼能確定別人是body在滾動呢? 也可以是某個模組自己在滾動啊,這樣不就jj了? 是的!! 我們來優化一下我們的程式碼,當我們的指令執行到add的時候,我們建立監聽者.
那麼除了監聽我們的scroll事件外我們還要監聽哪些事件呢? 我們列一下:

const DEFAULT_EVENTS = ['scroll', 'wheel', 'mousewheel', 'resize', 'animationend', 'transitionend', 'touchmove']

然後我們指令走add的時候獲取滾動元素,加上監聽:

 /**
     * 只調用一次，指令第一次繫結到元素時呼叫。在這裡可以進行一次性的初始化設定。
     * @param el 指令所繫結的元素，可以用來直接操作 DOM 。
     * @param binding
     * @param vnode
     */
    add(el, binding, vnode) {
      console.log('add');
      let {src, loading, error} = this._valueFormatter(binding.value)

      Vue.nextTick(() => {
        const newListener = new LazyListener({
          el,
          loading,
          error,
          src,
          options: this.options,
          elRenderer: this._elRenderer.bind(this),
        })
        this.ListenerQueue.push(newListener)
        //獲取滾動元素
        let $parent;
        if (!$parent) {
          $parent = scrollParent(el)
        }
        //給window新增監聽
        this._addListenerTarget(window)
        //給父滾動元素新增監聽
        this._addListenerTarget($parent)
        Vue.nextTick(() => {
          this.lazyLoadHandler()
        })
      })
    }

    /**
     * 新增監聽
     * @param el
     * @private
     */
    _addListenerTarget(el) {
      if (!el) return
      DEFAULT_EVENTS.forEach((evt) => {
        el.addEventListener(evt, this.lazyLoadHandler.bind(this), false)
      })

    }

function scrollParent(el) {
  if (!(el instanceof HTMLElement)) {
    return window
  }
  let parent = el

  while (parent) {
    if (parent === document.body || parent === document.documentElement) {
      break
    }

    if (!parent.parentNode) {
      break
    }

    if (/(scroll|auto)/.test(overflow(parent))) {
      return parent
    }

    parent = parent.parentNode
  }

  return window
}

function overflow(el) {
  return style(el, 'overflow') + style(el, 'overflow-y') + style(el, 'overflow-x')
}

const style = (el, prop) => {
  return typeof getComputedStyle !== 'undefined'
    ? getComputedStyle(el, null).getPropertyValue(prop)
    : el.style[prop]
}

最後我們修改下測試頁面的程式碼:

<template>
  <div class="opt-container">
    <div v-for="(image,index) in images" v-bind:key="'image-'+index">
      <img v-lazy="{src: image}" width="100%" height="500px">
    </div>
  </div>
</template>

<script>
  const IMAGES = [
    'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1533137283186&di=c136f7387cfe2b79161f2f93bff6cb96&imgtype=0&src=http%3A%2F%2Fpic1.cxtuku.com%2F00%2F09%2F65%2Fb3468db29cb1.jpg',
    'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1533137283186&di=de941561df3b6fd53b2df9bfd6c0b187&imgtype=0&src=http%3A%2F%2Fpic43.photophoto.cn%2F20170413%2F0008118236659168_b.jpg',
    'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1533137283185&di=aff7e8aa60813f6e36ebc6f6a961255c&imgtype=0&src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F01d60f57e8a07d0000018c1bfa2564.JPG%403000w_1l_2o_100sh.jpg',
    'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1533726597165&di=198b9836a377021082281fcf0e5f3331&imgtype=0&src=http%3A%2F%2Fchongqing.sinaimg.cn%2Fiframe%2F159%2F2012%2F0531%2FU9278P1197T159D1F3057DT20140627094648.jpg',
    'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1533726597167&di=e06fc5f74fac9bb61d229249219cbe4f&imgtype=0&src=http%3A%2F%2Fimg2.ph.126.net%2FuWKrNCkdBNBPzdjxCcUl-w%3D%3D%2F6630220042234317764.jpg'
  ]
  export default {
    name: 'Lazy',
    data() {
      return {
        images: IMAGES,
        showImage: true
      }
    },
    mounted(){
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .opt-container {
    font-size: 0px;
  }
</style>

然後我們執行程式碼:
2.gif

當我們往上滑動的時候,跟我們之前的效果一致了~~~

好啦!! 到這裡我們圖片框架程式碼都已經解析完畢了,也帶著一起敲了一遍,有童鞋會覺得程式碼有點熟悉哈,沒錯,就是vue-lazyload的程式碼,哈哈!! 小夥伴不要把我程式碼直接拖進工程哈,要用的話直接去拖vue-lazyload的程式碼,最後附上demo的github連結,以及vue-lazyload的github連結:

DEMO地址: https://github.com/913453448/VuexDemo.git

[Vue-Lazyload地址:https://github.com/hilongjw/vue-lazyload
](https://github.com/hilongjw/vue-lazyload
)

最後,歡迎志同道合的小夥伴入群,歡迎交流~~~~
qq群號:

螢幕快照 2018-08-08 下午8.00.13.png

相關推薦

前端入門之(vue圖片載入框架完結)

前言: 2018已經過了一大半了,並沒有感覺在本命年中有啥不順的,每天過得還是挺開心的��,很感謝身邊的朋友一路的陪伴,感恩!! 已經半年多沒回家了,不久前跟麻麻發了一個視訊,跟過年比,家裡妹妹長了10cm,麻麻瘦了10kg,我家狗狗從小奶狗長到了30kg了,麻麻說:“你鬍子長了要刮一颳

前端入門之(vue-router全解析三)

上一節前端入門之(vue-router全解析二)我們帶著vue-router的push方法走了一遍原始碼,然後還分析了router-view的原始碼,最後還差router-link元件沒有分析了,我們今天繼續vue-router解析. 我們在原始碼中找到router-link元件的程

前端入門之(vue-router全解析一)

前言: 一直想著啥時候能把vue全家桶的東西原始碼全部擼一遍,可惜無奈能力有限啊(哈哈,最近一直在補js基礎),看vuex程式碼的時候覺得也還好,基本上是邊學邊解析原始碼的方式把vuex擼了一遍(畢竟整個vuex加起來也沒多少程式碼),可當碰到vue-router的時候,首先就被它那幾千

前端入門之(vue-router全解析二)

前面一篇文章 前端入門之(vue-router全解析一)我們簡單的瞭解了一下vue-router的原理,今天我們繼續vue-router,我們從頭到尾的全部擼一遍哈.小夥伴開車啦,跟緊了哦~~ 我這裡以vue-cli+webpack建立的但頁面工程為例子了哈,我們直接選帶有vue-r

【Android 進階】圖片載入框架之Glide

生活 cannot 簡單介紹 style codes 詳細 npr 濾鏡 ive 簡單介紹 在泰國舉行的谷歌開發人員論壇上，谷歌為我們介紹了一個名叫 Glid

圖片載入框架之Picasso

一、簡介Picasso是Square公司出品的一個強大的圖片下載和快取圖片庫1）在adapter中需要取消已經不在視野範圍的ImageView圖片資源的載入，否則會導致圖片錯位，Picasso已經解決了這個問題。2）使用複雜的圖片壓縮轉換來儘可能的減少記憶體消耗3）自帶記憶體

Android之圖片載入框架Picasso原始碼解析

個人開發的微信小程式，目前功能是書籍推薦，後續會完善一些新功能，希望大家多多支援！ 前言 picasso是Square公司開源的一個Android圖形快取庫，地址http://square.github.io/picasso/，可以實現圖片下載和快取功能。僅

圖片載入框架之Gilde詳細講解(二)

gilde的使用案例： 1)基本使用 2）載入網路圖片 Glide.with(this).load("http://img1.imgtn.bdimg.com/it/u=2615772929,948758168&fm=21&gp=0.jpg").in

Android圖片載入框架Glide之探究Glide的快取機制

轉載自：http://blog.csdn.net/guolin_blog/article/details/54895665 在本系列的上一篇文章中，我帶著大家一起閱讀了一遍Glide的原始碼，初步瞭解了這個強大的圖片載入框架的基本執行流程。 不過，上一篇文

學習Vue.js之vue移動端框架到底哪家強

outer import ati 工作 需要 全部 ctu ron 上層 官網：https://cn.vuejs.org/ Weex 2016年4月21日，阿裏巴巴在Qcon大會上宣布跨平臺移動開發工具Weex開放內測邀請。 Weex 是一套簡單易用的跨平臺開發方案

Android圖片載入框架最全解析（四），玩轉Glide的回撥與監聽（筆記）

參考原文：Android圖片載入框架最全解析（四），玩轉Glide的回撥與監聽 回撥的原始碼實現 的Target物件傳入到GenericRequest當中，而Glide在圖片載入完成之後又會回撥GenericRequest的onResourceReady()方法，onReso

Android圖片載入框架最全解析（五），Glide強大的圖片變換功能（筆記）

參考原文：Android圖片載入框架最全解析（五），Glide強大的圖片變換功能 一個問題 百度這張logo圖片的尺寸只有540258畫素，但是我的手機的解析度卻是10801920畫素，而我們將ImageView的寬高設定的都是wrap_content，那麼圖片的寬度應該只有

Android圖片載入框架最全解析（三），深入探究Glide的快取機制(筆記)

原文地址：Android圖片載入框架最全解析（三），深入探究Glide的快取機制 筆記： 1.Glide快取簡介 2.快取Key EngineKey 重寫了equals()和hashCode()方法，保證只有傳入EngineKey的所有引數都相同的情況下才認為是

Android圖片載入框架最全解析（七），實現帶進度的Glide圖片載入功能（筆記）

參考原文：Android圖片載入框架最全解析（七），實現帶進度的Glide圖片載入功能 擴充套件目標 對Glide進行功能擴充套件，使其支援監聽圖片下載進度的功能 開始 dependencies { compile 'com.github.bumptech.glid

Android圖片載入框架最全解析（六），探究Glide的自定義模組功能(筆記)

參考原文：Android圖片載入框架最全解析（六），探究Glide的自定義模組功能 自定義模組的基本用法 自定義模組功能可以將更改Glide配置，替換Glide元件等操作獨立出來，使得我們能輕鬆地對Glide的各種配置進行自定義，並且又和Glide的圖片載入邏輯沒有任何交集，

Picasso圖片載入框架的使用

Picasso圖片載入框架的使用 Android 中有幾個比較有名的圖片載入框架，Universal ImageLoader、Picasso、Glide和Fresco。它們各有優點，以前一直用的是ImageLoader 做專案中的圖片載入，由於作者宣佈ImageLoader 不會在更新了，因

前端開發之vue之資料繫結

  2.1. 什麼是雙向繫結？ Vue框架很核心的功能就是雙向的資料繫結。 雙向是指：HTML標籤資料 繫結到 Vue物件，另外反方向資料也是繫結的。通俗點說就是，Vue物件的改變會直接影響到HTML的標籤的變化，而且標籤的變化也會反過來影響Vue物件的屬性的變化。 這樣一來

Android 圖片載入框架Glide用法

最近有個需求是，要將 url 地址傳過來的圖片載入到ImageView中，幾番折騰後找到 Glide，真的很好用，所以做下筆記 轉載：https://www.cnblogs.com/guilin-hu/p/5706916.html 在泰國舉行的谷歌開發者論壇上，谷歌為我們介紹了一個名叫&nb

前端入門之(vuex-router-sync解析)

前言:vue全家桶的內容我們已經研究過了vuex、vue-router,有興趣的童鞋可以去看看我之前的兩個系列的文章vuex原始碼解析一、vue-router全解析一,之前結合專案分析vuex的時候,當我們需要在vuex的action中處理路由跳轉的時候,沒認識vuex-router-s

安卓圖片載入框架選型

前言 圖片載入在 Android開發專案中非常常見，為了降低開發週期和難度，我們經常會選用一些圖片載入的開源庫，而現在圖片載入開源庫越來越多，我們應該選用哪種呢？今天我就給大家分別介紹 & 對比現今主流的圖片載入框架。 目錄 圖片載入開源庫.jpg 1. 主流的