官网的HBuilder Mac版已经支持Mac 10.11 （除beta3），请移步官网下载

今天试用了下hello mui上的图片懒加载功能，发现有些地方还无法满足我的需求，ajax动态加载的时候无法实现懒加载。

然后又看了下36kr的示例，因为代码关系实在太多了，耦合度比较高，遂自己动手写了一个轻量级的懒加载功能模块，而且支持图片缓存到本地哦~~~

欢迎各位拍砖，交流碰撞思想！

升级日志

v1.1.0 build 20160107
1、已增加 @LFZ 的代码，不用重复下载两次服务器端的图片
2、新增图片加载淡入特效
3、新增图片加载完成后回调
4、修改data-src为data-lazyload

功能特性

~原生实现，不依赖任何前端框架
~ajax动态加载支持图片懒加载
~支持图片缓存到本地
~轻量模块化

如何使用

1、引入md5.min.js，因为依赖js版md5函数，用于将图片url转换为32位md5

<script s r c="md5.min.js"></script>

2、在头部js包含下面的lazyload方法函数，否则可能报错函数未定义

3、HTML代码使用ajax动态生成如下img标签，src为默认图片，data-src填写图片网络地址，并且必须包含onload事件来触发懒加载功能。

<img s r c="placehold.jpg" data-lazyload="http://...jpg"  onload="lazyload(this)" />

注意：因为函数依赖plus.io和plus.downloader接口，所以在plus还没ready的时候img onload执行lazyload可能会报错，lazyload比plus先执行完毕。

当然，在真实环境中，不管是商品列表、订单列表等，我们的图片一般都是动态加载的，所以问题不大。
在代码的写法策略上需要使用动态加载方式，尽量不使用写死在html里面。

4、添加.img-lazyload 支持图片淡入样式

@-webkit-keyframes fadeIn{0%{opacity:0}100%{opacity:1}}  
@keyframes fadeIn{0%{opacity:0}100%{opacity:1}}  
.img-lazyload{-webkit-animation: fadeIn 350ms linear 0ms 1 normal both;animation: fadeIn 350ms linear 0ms 1 normal both;opacity:1;}

5、图片默认缓存到_downloads/image/目录下

活动图

函数源代码

/**  
 * 图片懒加载  
 * @param {Object}   obj       DOMElement  
 * @param {Function} callback  加载完成回调函数  
 *   
 * @author fanrong33  
 * @version 1.1.0 build 20160107  
 */  
function lazyload(obj, callback){  
    var debug = false; // 默认打印调试日志  
    if(obj.getAttribute('data-loaded')){  
       return;   
    }  

    var image_url = obj.getAttribute('data-lazyload');  
    debug && console.log(image_url);  

    // 1. 转换网络图片地址为本地缓存图片路径，判断该图片是否存在本地缓存  
    // http://...jpg -> md5  
    // 缓存目录 _downloads/image/(md5).jpg  
    var image_md5           = md5(image_url);  
    var local_image_url     = '_downloads/image/'+image_md5+'.jpg'; // 缓存本地图片url  
    var absolute_image_path = plus.io.convertLocalFileSystemURL(local_image_url); // 平台绝对路径  

    // new temp_img 用于判断图片文件是否存在  
    var temp_img = new Image();  
    temp_img.src = absolute_image_path;  
    temp_img.onload = function(){  
        debug && console.log('存在本地缓存图片文件'+local_image_url+'，直接显示');  

        // 1.1 存在，则直接显示（本地已缓存，不需要淡入动画）  
        obj.setAttribute('src', absolute_image_path);  
        obj.setAttribute('data-loaded', true);  
        obj.classList.add('img-lazyload');  

        callback && callback();  
        return;  
    }  
    temp_img.onerror = function(){  
        debug && console.log('不存在本地缓存图片文件');  

        // 1.2 下载图片缓存到本地  
        debug && console.log('开始下载图片'+image_url+' 缓存到本地: '+local_image_url);  
        function download_img(){  
            var download_task = plus.downloader.createDownload(image_url, {  
                filename: local_image_url // filename:下载任务在本地保存的文件路径  
            }, function(download, status) {  
                if(status != 200){  
                    // 下载失败,删除本地临时文件  
                    debug && console.log('下载失败,status'+status);  
                    if(local_image_url != null){  
                        plus.io.resolveLocalFileSystemURL(local_image_url, function(entry) {  
                            entry.remove(function(entry) {  
                                debug && console.log("临时文件删除成功" + local_image_url);  
                                // 重新下载图片  
                                download_img();  
                            }, function(e) {  
                                debug && console.log("临时文件删除失败" + local_image_url);  
                            });  
                        });  
                    }  
                }else{  
                    // 把下载成功的图片显示  
                    // 将本地URL路径转换成平台绝对路径  
                    obj.setAttribute('src', plus.io.convertLocalFileSystemURL(local_image_url));  
                    obj.setAttribute('data-loaded', true);  
                    obj.classList.add('img-lazyload');  

                    callback && callback();  
                }  
            });  
            download_task.start();  
        }  
        download_img();  
    }  

}

这里应该是一个BUG，我测试了几次都是如此

mui.ajax 成功回调都是执行二次；

//创建滑动块当前标识盒子
/**

• @param {Number} index null -正整数,索引号
• @param {string} src null -传入的图片URL集合
  */
  function createcurr(index, src) {
  。。。。。。。
  }

//创建滑动块当前标识盒子
/**

• @param {Number} index null -正整数,索引号
• @param {string} src null -传入的图片URL集合
  */
  function createslidercurr(index, src) {
  。。。。。。。
  }

从表面上来看是没有问题。现在问题来了，这两个函数中有一个函数在函数在引用的时候要提示数据类型与注解，有一个不提示。

createcurr 这个函数会提示
createslidercurr 这个数据不会提示

为什么会这样，刚开始的时候我为了让 createslidercurr 这个函数在引用的时候提示数据类型与注解，搞了很久，但是它就是不提示，郁了个闷啊，猫了个咪的，气死我了。

原因：createslidercurr 这个函数包含了 mui 里面的slider关建字 。

写这篇文章，是希望那个做规范开发有团队协作的人可以看一看哈，希望能帮到大家。。

OVER

<!DOCTYPE html>  
<html>  
<head>  
  <meta charset="utf-8">  
  <title>测试哪些元素支不支持伪元素</title>  
<style>  
input{  
  display: block;  
}  

body *:after{  
  content: "after";  
  color: red;  
}  

img{  
  padding:30px;  
  vertical-align: top;  
}  

</style>  
</head>  
<body>  
  <h1>测试哪些元素支不支持伪元素</h1>  
  <input type="text">  
  <input type="checkbox" name="" id="">  
  <input type="radio" name="" id="">  
  <input type="submit" value="Submit">  
  <input type="button" value="input">  
  <button>button</button>  
  <textarea name="" id="" cols="30" rows="10"></textarea>  
  <select name="" id="">  
    <option value="">select</option>  
  </select>  
  <hr>  
  <img src="https://www.baidu.com/img/bdlogo.png" alt="jb">  
  <iframe src="http://www.baidu.com" frameborder="0" width="500" height="300"></iframe>  
</body>  
</html>

text --- no
submit ---no
button --- no
textarea --- no
select ----no
img --- no
iframe -- no
=============
checkbox ----yes
radio ---- yes
button --- yes
hr --- yes
其它可以做成盒子的都支持

=============================

这个写得不全，各位需要测试的可以把这个COPY下去测试就行了。希望可以帮到大家。。。。。。。。。。。。

之前展示图片都是通过<img src="网络图片地址"> , 每次都请求服务器, 加载比较慢;
如何做到显示图片的时候先从本地获取,没有则联网下载,缓存到本地;下次直接从本地拿,无需再联网;

看了文档,逛了论坛,没有找到现成的案例,折腾了老半天,走了好多弯路,把自己写的分享给大家,
我用Android机测试是成功的,苹果机还没有试,有问题欢迎指出:

<!DOCTYPE html>  
<html>  

    <head>  
        <meta charset="utf-8">  
        <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">  
        <meta name="apple-mobile-web-app-capable" content="yes">  
        <meta name="apple-mobile-web-app-status-bar-style" content="black">  
    </head>  

    <body>  
        <div class="mui-content">  
            <img id="img1"/>  
            <img id="img2"/>  
            <img id="img3"/>  
        </div>  
    </body>  

    <script src="../js/mui.js" type="text/javascript" charset="utf-8"></script>   
    <script type="text/javascript" charset="utf-8">  
        mui.init(); //mui初始化  
        mui.plusReady(function() {  
            setImg("img1", "http://ask.dcloud.net.cn/uploads/avatar/000/00/00/16_avatar_max.jpg");  
            setImg("img2", "http://client.bbzuche.com/resources/product/2014012094648828751145/20150611/logo.jpg");  
            setImg("img3", "http://www.bbzuche.com/images/tan.jpg");  
        });  

        /*<img>设置图片  
         *1.从本地获取,如果本地存在,则直接设置图片  
         *2.如果本地不存在则联网下载,缓存到本地,再设置图片  
         * */  
        function setImg(imgId, loadUrl) {  
                if (imgId == null || loadUrl == null) return;  
                //图片下载成功 默认保存在本地相对路径的"_downloads"文件夹里面, 如"_downloads/logo.jpg"  
                var filename = loadUrl.substring(loadUrl.lastIndexOf("/") + 1, loadUrl.length);  
                var relativePath = "_downloads/" + filename;  
                //检查图片是否已存在  
                plus.io.resolveLocalFileSystemURL(relativePath, function(entry) {  
                    console.log("图片存在,直接设置=" + relativePath);  
                    //如果文件存在,则直接设置本地图片  
                    setImgFromLocal(imgId, relativePath);  
                }, function(e) {  
                    console.log("图片不存在,联网下载=" + relativePath);  
                    //如果文件不存在,联网下载图片  
                    setImgFromNet (imgId,loadUrl,relativePath);  
                });  
            }  

        /*给图片标签<img>设置本地图片  
         * imgId 图片标签<img>的id  
         * relativePath 本地相对路径 例如:"_downloads/logo.jpg"  
         */  
        function setImgFromLocal(imgId, relativePath) {  
                //本地相对路径("_downloads/logo.jpg")转成SD卡绝对路径("/storage/emulated/0/Android/data/io.dcloud.HBuilder/.HBuilder/downloads/logo.jpg");  
                var sd_path = plus.io.convertLocalFileSystemURL(relativePath);  
                //给<img>设置图片  
                $id(imgId).setAttribute("src", sd_path);  
            }  

        /*联网下载图片,并设置给<img>*/  
        function setImgFromNet (imgId,loadUrl,relativePath) {  
            //先设置下载中的默认图片  
            $id(imgId).setAttribute("src", "../images/loading.png");  
            //创建下载任务  
            var dtask = plus.downloader.createDownload(loadUrl, {}, function(d, status) {  
                if (status == 200) {  
                    //下载成功  
                    console.log("下载成功=" + relativePath);  
                    setImgFromLocal(imgId, d.filename);  
                } else {  
                    //下载失败,需删除本地临时文件,否则下次进来时会检查到图片已存在  
                    console.log("下载失败=" + status+"=="+relativePath);  
                    //dtask.abort();//文档描述:取消下载,删除临时文件;(但经测试临时文件没有删除,故使用delFile()方法删除);  
                    if (relativePath!=null)  
                        delFile(relativePath);  
                }  
            });  
            //启动下载任务  
            dtask.start();  
        }  

        /*删除指定文件*/  
        function delFile(relativePath) {  
            plus.io.resolveLocalFileSystemURL(relativePath, function(entry) {  
                entry.remove(function(entry) {  
                    console.log("文件删除成功==" + relativePath);  
                }, function(e) {  
                    console.log("文件删除失败=" + relativePath);  
                });  
            });  
        }  

        /*根据id查找元素*/  
        function $id(id) {  
            return document.getElementById(id);  
        }  

    </script>  

</html>  

为什么要配置模块

DCloud的5+客户端对安装包的构成划分了模块，并与5+的Api接口对应，即使用了什么接口，在制作安装包时里只需将该接口对应的模块编译到安装包里即可。无关模块在最终的安装包里并不存在，如应用并未用到地图功能，则最终的安装包里不需要地图模块相关的组件。这样可以减少安装包的体积。

为什么要配置权限

Android平台对底层Api的调用做了权限控制，如要使用短信功能，需要向系统注册READ_SMS、SEND_SMS、WRITE_SMS权限。同时，应用市场对Android应用的权限会有审核，申请多余的权限可能会导致被应用市场拒收，某些特殊的权限如短信，需要额外向某些应用市场申请（参见360手机助手应用市场审核失败，提示短信权限的问题）。因此开发者需要确认自己的权限是否有多余不需要的权限。

注意若使用Native.js，如果涉及相关权限，也需要自己配置，否则打包会不能生效。

querySelectorAll的结果遍历时对象为空

document.querySelectorAll(".box")得到的不是数组，是nodelist，虽然可以类似数组的for，但真的不是数组，不能直接对其使用数组的方法forEach，如果我们需要转换为数组，我们可以用Array.prototype.slice.call来辅助就可以了。

https://css-tricks.com/snippets/javascript/loop-queryselectorall-matches/

var divs = document.querySelectorAll('div');  

[].forEach.call(divs, function(div) {  
  // do whatever  
  div.style.color = "red";  
});

Android平台通过native.js实现接收系统消息，如监听安装卸载apk事件

http://ask.dcloud.net.cn/article/222

openwindow 是对5+的封装，更细致的操作用plus.webview相关方法

@Ting

实现nav导航，与子页面切换
文档参考：http://dcloudio.github.io/mui/javascript/#subpage

在html添加数个导航，在js中，为这些导航批量添加事件，在点击的时候打开子页面。子页面无底部导航，共用父页面的底部导航。
父子页面共用底部导航，在预加载的地方，使用styles.bottom即可

复杂的地方在于，切换为首页时，要保持首页的状态，则需要显示应用初始化时候的状态，则需要找到当前父页面的id并进行展示

        $.page_nav = function() {  
            navs = document.querySelectorAll(".mui-tab-item");  
            for(n in navs)  
            {  
                obj = navs[n] .getAttributeNode("id").value;  
                app_debug && console.log(obj);  

                if(obj != 'page_index') {  
                    $.preload({  
                        "id": obj,  
                        "url": obj.replace("page_", "")+'.html',  
                        "styles":{  
                            top:'0px',//mui标题栏默认高度为45px  
                            bottom: '50px',//mui导航栏默认高度为50px  
                        }  
                    });  
                }  

                document.getElementById(obj).addEventListener("tap", function(){  
                    if(this.id == 'page_index') {  
                        //获得主页面的webview  
                        var main = plus.webview.currentWebview();  
                        mui.openWindow({"id":main.id});  
                    } else {  
                        mui.openWindow({  
                            "id":this.id,  
                            "crateNew":false,  
                            "styles":{  
                                top:'0px',//mui标题栏默认高度为45px  
                                bottom: '50px'//默认为0px，可不定义  
                            }  
                        });  
                    }  
                }, false);  
            }  
        }  

        //底部导航菜单绑定  
        $.page_nav();

    <nav class="mui-bar mui-bar-tab">  
        <a class="mui-tab-item mui-active" id="page_index" target="index.html">  
            <span class="mui-icon icon iconfont icon-beauty">&#xe600;</span>  
            <span class="mui-tab-label">清新</span>  
        </a>  
        <a class="mui-tab-item" id="page_category" target="category.html">  
            <span class="mui-icon iconfont icon-sexy">&#xe601;</span>  
            <span class="mui-tab-label">时尚</span>  
        </a>  
        <a class="mui-tab-item" id="page_article" target="article.html">  
            <span class="mui-icon iconfont icon-meng">&#xe602;</span>  
            <span class="mui-tab-label">评论</span>  
        </a>  
        <a class="mui-tab-item" id="page_login" target="login.html">  
            <span class="mui-icon mui-icon-gear"></span>  
            <span class="mui-tab-label">设置</span>  
        </a>  
    </nav>

公司介绍：

挑食是一家专业火锅上门服务的O2O公司，从去年10月推出，已经获得两轮融资，投资人中包括薛蛮子、蒋涛、王峰等知名人士，短短半年时间已做到火锅上门第一大，服务了数万家庭火锅用餐。已开通北上广深四地业务，现急需高端技术人才加入

招人需求：

1. 吃货；
2. 年轻，能折腾，爱扣爱钻研；
3. 精通web前端开发技术；
4. 良好的代码书写风格和交流能力；
5. 开发过mobile webApp和微信App优先；
6. 熟悉HBuilder、5+、mui优先；

职责：

使用HBuilder开发5+ App、微信App、网站

薪资：

15-25k

工作地点：

北京朝阳区常营

有意速投简历到dougaofeng@mobyeah.com，
不投简历的也可以关注微信公众号tiaoshicom，订个火锅送上门！

公司介绍：

卡拉丁是一家面向广大汽车用户提供便捷养护服务的创新型汽车后市场O2O服务提供商。公司网站www.kalading.com
卡拉丁目前在北京、上海和天津等十多个城市为用户提供上门汽车保养服务。 “便捷、透明、安全”就是卡拉丁的产品理念，通过养护技术与服务方式的创新，并结合移动互联网技术，卡拉丁最先提出并实现了规模化、标准化的上门汽车保养服务。公司2015年4月完成由宽带资本领投的千万美元A轮融资。请不要错过加入未来能够改变汽车服务行业成为互联网巨头职员的机会！

招人需求：

html5/JS/Rails高级工程师，
有兴趣同时做web前端和后端开发，
喜欢Ruby，喜欢javascript语言，
熟悉rails，mongodb，bootstrap，angularjs者优先。

职责：

开发基于rails，移动设备优先的网站。

薪资：

20-25K

欢迎投递简历到633@kalading.com