前端實作圖檔懶加載(lazyload)

cid=89 本文章當初是為了給父親講述一下政務網站新聞釋出，細心的老爹竟然看得出來大部分煙台地區的政務網站都是一套系統，其實這合情合理，畢竟不能每個市，區，縣的網站獨立開發，不利于對資料的維護。

正好部落格有背景，其實也就跟父親展示了一下背景釋出文章的功能，這也是我沒有選擇

ghost

.

hexo

的原因，我可以随時随地的寫文章，而不需要去

git

,

node

告訴他其實政府新聞辦宣傳部什麼的隻是把文章複制進去而已……畢竟公務員不是程式員，估計也允許

markdown

寫文章吧，是以随便打了個數字……

在實際的項目開發中，我們通常會遇見這樣的場景：一個頁面有很多圖檔，而首屏出現的圖檔大概就一兩張，那麼我們還要一次性把所有圖檔都加載出來嗎？顯然這是愚蠢的，不僅影響頁面渲染速度，還浪費帶寬。這也就是們通常所說的首屏加載，技術上現實其中要用的技術就是圖檔懶加載–到可視區域再加載。

思路：

将頁面裡所有img屬性src屬性用data-xx代替，當頁面滾動直至此圖檔出現在可視區域時，用js取到該圖檔的data-xx的值賦給src。

懶加載 ：為什麼

解決頁面假死狀态

單頁面vue和react,，隻有一個HTML,首屏加載慢，後期切換比較快，不利于搜尋引擎優化（SU），前端渲染的都不利于

首屏做到500kb才利于使用者體驗，最大不要超過1兆

關于各種寬高：

頁可見區域寬： document.body.clientWidth;
網頁可見區域高： document.body.clientHeight;
網頁可見區域寬： document.body.offsetWidth (包括邊線的寬);
網頁可見區域高： document.body.offsetHeight (包括邊線的寬);
網頁正文全文寬： document.body.scrollWidth;
網頁正文全文高： document.body.scrollHeight;
網頁被卷去的高： document.body.scrollTop;
網頁被卷去的左： document.body.scrollLeft;
網頁正文部分上： window.screenTop;
網頁正文部分左： window.screenLeft;
螢幕分辨率的高： window.screen.height;
螢幕分辨率的寬： window.screen.width;
螢幕可用工作區高度： window.screen.availHeight;
           

示例：

jqueryLazyload方式

下載下傳位址：

https://github.com/helijun/helijun/blob/master/plugin/lazyLoad/jquery.lazyload.js

<section class="module-section" id="container">
     <img class="lazy-load" data-original="../static/img/loveLetter/teacher/teacher1.jpg" width="640" height="480" alt="測試懶加載圖檔"/>
</section>
           

require.config({
    baseUrl : "/static",
    paths: {
        jquery:'component/jquery/jquery-3.1.0.min'
        jqueryLazyload: 'component/lazyLoad/jquery.lazyload',//圖檔懶加載
    },
    shim: {
        jqueryLazyload: {
            deps: ['jquery'],
            exports: '$'
        }
    }
});
           

require(
    [
        'jquery',
        'jqueryLazyload'
    ], 
    function($){
        $(document).ready(function() {     
            $("img.lazy-load").lazyload({ 
　　　　　　　　　　effect : "fadeIn", //漸現，show(直接顯示),fadeIn(淡入),slideDown(下拉)
　　　　　　　　　　threshold : 180, //預加載，在圖檔距離螢幕180px時提前載入
　　　　　　　　　　event: 'click',  // 事件觸發時才加載，click(點選),mouseover(滑鼠劃過),sporty(運動的),預設為scroll（滑動）
　　　　　　　　　　container: $("#container"), // 指定對某容器中的圖檔實作效果
　　　　　　　　　　failure_limit：2 //加載2張可見區域外的圖檔,lazyload預設在找到第一張不在可見區域裡的圖檔時則不再繼續加載,但當HTML容器混亂的時候可能出現可見區域内圖檔并沒加載出來的情況
　　　　　　　　}); 
　　　　　　});
　　});
           

為了代碼可讀性，屬性值我都寫好了注釋。值得注意的是預制圖檔屬性為data-original，并且最好是給予初始高寬占位，以免影響布局，當然這裡為了示範我是寫死的640x480，如果是響應式頁面，高寬需要動态計算。

Vue懶加載

修改

router.js

import Vue from 'vue'
import Router from 'vue-router'
import Index from './views/Index'
// import Login from './views/Login'//采用懶加載
import Register from './views/Register'

Vue.use(Router)

export default new Router({
  mode: 'history',
  base: process.env.BASE_URL,
  routes: [
    {
      path: '/',
      name: 'index',
      component: Index
    },
    {
      path: '/login',
      name: 'login',
      component: ()=>import('./views/Login')//采用懶加載
    },
    {
      path: '/register',
      name: 'register',
      component: Register
    }
  ]
})
           

React懶加載

元件的懶加載的4種方法

1、webpack+es6的import(this.props.children為回調函數);

2、webpack+es6的import純粹的高階組價

3、webpack+es6的import +async（高階函數）

4、webpack+require.ensure (高階組價)

原理：隻有使用到這個元件的時候再去加載