前端實現圖片懶加載(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 (高階組價)

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