微信触屏版专题前端Checklist

默认分类 2014/09/16 20:38

近期微信触屏版类专题较多，有一些重要的检查点，特记录如下：

1.动画在同等条件下尽可能用CSS3实现，少用JS实现（周周）
2.执行ontouchmove事件的同时尽可能不执行CSS3的动画（周周）
3.动画尽可能复用动画库中已有的动画效果。
4.尽可能合并小图片减少请求（李恝）
5.图片尽可能压缩一下（李恝）
6.图片不宜一次显示太多，实测htc android 4.0上12张图片一次性显示需耗时4秒，三张图片耗时不到1秒。
7.如果有较多图片，尽可能使用预加载方式，同时加载和执行脚本会很耗性能。
8.iPhone上页面只能同时播放一个音频，且同一个音频每次播放都会下载， http://stackoverflow.com/questions/9811429/html5-audio-tag-on-safari-has-a-delay

动画库参考资料：

h5bp.github.io/Effeckt.css/
https://daneden.me/animate/
https://github.com/codrops/PageTransitions
http://ecd.tencent.com/css3/tools.html

触屏版开发准则：（参考腾讯alloyteam）

http://alloyteam.github.io/Spirit/modules/Standard/index.html

图片预加载： jQuery版（李恝） (function ($) { var imgList = []; $.extend({ preload: function (imgArr, option) { var setting = $.extend({ init: function (loaded, total) {}, loaded: function (img, loaded, total) {}, loaded_all: function (loaded, total) {} }, option); var total = imgArr.length; var loaded = 0;

            setting.init(0, total);
            for (var i in imgArr) {
                imgList.push($("<img />")
                    .attr("src", imgArr[i])
                    .load(function () {
                        loaded++;
                        setting.loaded(this, loaded, total);
                        if (loaded == total) {
                            setting.loaded_all(loaded, total);
                        }
                    })
                );
            }

        }
    });
})(jQuery);


$(function () {
    var $loading = $('#loading'),
        $loadingBar = $('#loadingBar'),
        $num = $loading.find('.loading_num'),
        percent = 0;
    $.preload([
        '/classzt/watergame/images/gameBg.jpg',
        '/classzt/watergame/images/gameTitle.png',
        '/classzt/watergame/images/cc_cat.png',
        '/classzt/watergame/images/ice_cat.png',
        '/classzt/watergame/images/dlg_bg.png',
        '/classzt/watergame/images/water.png',
        '/classzt/watergame/images/grass.png',
        '/classzt/watergame/images/bucket.png',
        '/classzt/watergame/images/bucket_down.png',
        '/classzt/watergame/images/gameBtn.png',
        '/classzt/watergame/images/header_bg.png'
    ], {
        init: function (loaded, total) {
            $num.text('0%');
        },
        loaded: function (img, loaded, total) {
            percent = (loaded * 100 / total).toFixed(0);
            $num.text(percent + '%');
            $loadingBar.width(percent + '%');
        },
        loaded_all: function (loaded, total) {
            setTimeout(function () {
                $loading.remove();
            }, 300);
        }
    });

});

JS封装版

<script>
function preload(opt, callback) {
    var me = preload,
        list =  Object.prototype.toString.call(opt) === '[object Array]' ? opt : 
        (opt && Object.prototype.toString.call(opt.list) === '[object Array]' ? opt.list : []) ;
    if (!me.loaded && !me.left) {me.init();}

    me.onloadAllCallback = callback;
    me.finished = false;
    me.left = list;
    me.loading = [].concat(list);
    me.maxCount = opt.maxCount;

    me.loadLeft();
};
preload.init = function () {
    preload.left = [];
    preload.list = [];
    preload.loaded = [];
    preload.finished = false;
    preload.onloadAllCallback = new Function();

    var wrap = document.getElementById('preload_wrap');
    if (!wrap) {
        wrap = document.createElement('DIV');
        wrap.id = 'preload_wrap';

        var parent = document.body || document.documentElement;
        if (parent.firstChild) {
            parent.insertBefore(wrap, parent.firstChild);
        }
        else {
            parent.appendChild(wrap);
        }
    }
    wrap.style.position = 'absolute';
    wrap.style.left = '-1000px';
    wrap.style.width = '10px';
    wrap.style.height = '10px';
    wrap.style.overflow = 'hidden';
};
preload.loadNext = function (list) {
    var wrap = document.getElementById('preload_wrap'),
        container = document.createDocumentFragment(),
        div = document.createElement('DIV'),
        img;
    for (var i=0,ilen=list.length; i<ilen; i++) {
        div.innerHTML = '<img onload="preload.onloadCallback(this)" />'; 
        img = div.firstChild && div.firstChild.onload ? div.firstChild : div.firstChild.nextSibling;
        img.src = list[i];
        img.setAttribute('str', list[i]);
        container.appendChild(img);
    }
    wrap.appendChild(container);
};
preload.loadLeft = function () {
    var me = preload,
        count;
    if (me.left && me.left.length) {
        count = me.maxCount || me.left.length;
        me.loadNext(me.left.splice(0, count));
    }
};
preload.onloadCallback = function (elem) {
    var me = preload,
        src = elem.getAttribute('str');
    if (!me.loaded && !me.left) {
        me.init();
    }
    me.loaded.push(src);

    for (var i=me.loading.length-1; i>-1; i--) {
        if (me.loading[i] === src) {
            me.loading.splice(i, 1);
        }
    }

    if (!me.finished && me.loading.length < 1 && me.left.length < 1) {
        me.finished = true;
        me.onloadAllCallback();
    }
    else {
        me.loadLeft();
    }
};
</script>
<div id="preload_wrap"></div>
<script>
preload({list:[
 'img/step04_z1001.jpg'
,'img/step04_z1002.jpg'
,'img/step04_z1003.jpg'
,'img/step04_z1004.jpg'
,'img/step04_z1005.jpg'
,'img/step04_z1006.jpg'
,'img/step04_z1007.jpg'
,'img/step04_z1078.jpg'
,'img/step04_z1008.jpg'
,'img/step04_z1009.jpg'
,'img/step04_z1010.jpg'
,'img/step04_z1011.jpg'
]},function(){alert('finish');}
</script>

>> 留言评论