前端性能优化--图片懒加载（lazyload）

懒加载介绍：

    1.通俗介绍：前端工作中，界面和效果正在变得越来越狂拽炫酷，与此同时性能也是不得不提的问题。有些项目，页面长，图片多，内容丰富。像商城页面。如果同步加载时一次性加载完毕，那肯定是要等到花都谢了，loading转的人都崩溃~。今天分享的是Lazyload技术 是一种延迟加载技术。让页面加载速度快到飞起、减轻服务器压力、节约流量、提升用户体验。

    2.原理：图片的加载是由src的值引起，当对src赋值时浏览器就会请求图片资源，基于这个，可以利用html5属性data-original来保存图片的路径，当我们需要加载图片的时候才将data-original的值赋予src，酱就能实现图片的按需加载，也就是懒加载了。

    3.优点：提高前端性能，图片在需要的时候才加载，减轻服务的负担，提高页面的加载速度，提高用户体验。

懒加载的使用

    1.下载地址：http://plugins.jquery.com/lazyload/

    2.使用jquery-lazyload.js，jQuery的插件用于懒加载使用，需要依赖jQuery库，所以需要将两个文件都引入进去。

<script src="js/jquery-3.3.1.min.js"></script>
<script src="js/jquery.lazyload.min.js"></script>

    3.图片中不使用src属性，因为使用src属性后就会默认发送请求请求图片，使用data-original代替如：

<img  class="lazy" data-original="img/hotel279174_01_xxx1213.jpg" height="170px" width="280px" alt="" />

    4.注意图片要设置宽高。

    5.添加jQuery代码。

<script>
   $(function(){
	$("img.lazy").lazyload({
           //显示方式，淡入淡出
	   effect : "fadeIn"
	});
    });
</script>

    6.效果图，里面小飞机就是在加载
   

7.jquery-lazyload.js的参数

01.threshold :设置Threshold参数来实现滚到距离其xx px时就加载。如：

$(function() {
     $("img.lazy").lazyload({
        threshold :100
    });
})

02.event ：触发定义的事件时，图片才开始加载（此处click代表点击图片才开始加载，还有mouseover，sporty,foobar(…)）

$(function(){
      $("img.lazy").lazyload({
            event : "click"
      });
})

03.effects ：图片显示时的效果，默认是show。

$(function(){
      $("img.lazy").lazyload({
          effects:"fadeIn"
      });
})

04.还有很多参数可以设置，可以自己去查询。

今日的lazyload插件就如上的使用， 欢迎借鉴。