前端实现图片懒加载(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 (高阶组价)

原理：只有使用到这个组件的时候再去加载