关于懒加载的使用

懒加载是关于图片处理的js插件，在网页中的使用可以使网页更加轻便，节约内存。提高用户体验。页面如果有很多图片的时候，当你滚动到相应的行时，当前行的图片才即时加载的，这样子的话页面在打开只加可视区域的图片，而其它隐藏的图片则不加载。
使用方法：
1.插件的下载
推荐github网站，里面不仅有懒加载，还有其他各种插件提供下载。
2.文件的引入
我们下载的插件是一整个文件夹，然而我们需要的文件就那么几个，所以不必引入整个文件夹，懒加载必须的文件有以下这些：
01.jquery文件

<script src="js/jquery-1.12.4.js"></script>

02.懒加载js文件

<script type="text/javascript" src="js/jquery.lazyload.min.js" ></script>

这是必须引入的文件，在作好准备工作后，就可以开始懒加载插件的使用，在下载插件的官网有详细的使用说明，我们只需要根据说明一步步操作。
3.懒加载使用
平时我们在网页中插入图片一般直接使用img标签，然后src引入图片路径。比如：

<img src="img/lygl06_0314.jpg" />

但是使用懒加载后我们不能使用src。而是data-original来引入图片路径。比如：

<img src="img/lazyload.gif" data-original="img/lygl06_0314.jpg" height: "174px";width: "279px"; class="lazy"/>

图片的默认class为lazy，可以自行更改。
需要注意的是，使用懒加载时，图片必须设置height,width属性，否则图片无法正常显示。
然而，当我们网速比较慢的时候，图片没有立即加载出来，为了提升用户体验，我们则需要在图片还未加载出来时提示用户：图片正在加载。所以在img标签内用src引入我们的提示图片，一般为gif动图：src=“img/lazyload.gif”。
写好图片布局后，最后只需要在script调用懒加载js代码即可：

$(function() {
    			$("img.lazy").lazyload( );
    			｝

一个简单的图片懒加载就完成了。为了有更好的视觉效果，我们还可以根据需要在函数调用时加入各种参数，比如fadeIn，fadeOut等。