大白话解释如何使用DCloud的图片延迟加载（懒加载、lazyload）

像我这样的“百度流”、“社区流”小白，从乱翻资料到成功使用DC的每一个功能，都是一个痛苦的过程。
事实上，DC提供了优秀且易用的lazyload机制。不仅可以在app使用，也可以在web开发过程中使用。其还具有一个特别的优点：在tab滑动页面状态为隐藏时，自动启用lazyload机制，切换为显示时才载入真实图片，大大节省流量。

经试验，只要满足以下几点，就能跑起来：

约定：{$tplRoot}表示模板所在路径，应按照实际情况修改。chrome 下用F12键进入调试，不报404为准。

一、在所需页面，成功引入以下三个js。

<script type="text/javascript" src="{$tplRoot}/mui/js/mui.min.js"></script>  
<script type="text/javascript" src="{$tplRoot}/mui/js/mui.lazyload.js"></script>  
<script type="text/javascript" src="{$tplRoot}/mui/js/mui.lazyload.img.js"></script>

为保证ui效果，建议引入以下CSS

<link rel="stylesheet" href="{$tplRoot}/mui/css/mui.min.css">

二、html结构
不论是用js动态生成，还是用其他方法生成html，都要按照以下规范：

<div id="img-content-app">  
　　<div class="rich_media_content">  
　　　　<!--其他html-->  
　　　　<img data-lazyload="图片实际地址" src="临时占位图片地址">  
　　　　<!--其他html-->  
　　</div>  
</div>

注：测试时内容至少搞成三四屏以上，一屏当然启动不了lazyload。

三、在body区域加入以下JS代码

<script type="text/javascript" charset="utf-8">  
    var list = document.getElementById("img-content-app");//表示需要实施lazyload的div区域，指定其id。  
    var lazyLoadApi = mui('#img-content-app .rich_media_content').imageLazyload({//.rich_media_content指定lazyload实施区域的div class  
        autoDestroy: false,  
        placeholder: '{$tplRoot}/images/60x60.gif'//在js里指定临时占位图片，需自行准备并指定正确的本地路径或远程路径  
    });  
    mui.init();  

// ...other script...  

</script>

解释：
一、可以看到，html里的div之id、class与js里应该写成一致。具体写成什么，并不重要。但###必须要对应###。
二、需要lazy区域里的图片一定要有data-lazyload。

示例：https://app.lijiangtv.com/index.php?s=/addon/AppManage/Client/index/aid/1660