摘要：由于操作上比較多的設(shè)計(jì)都是隱性的例如滑動(dòng)之類，需要手勢(shì)動(dòng)畫作提示。如果頁面是推廣頁面，絕大部分用戶都是首次進(jìn)入，而設(shè)計(jì)中的元素前端不能復(fù)現(xiàn)只能使用圖片時(shí)，會(huì)產(chǎn)生加載時(shí)間較長(zhǎng)的問題。各手機(jī)尺寸，和比例。

先羅列一下我遇到的問題：

用戶可選擇圖片上傳，但是圖片比較大（基本都是2M以上），而且還得異步上傳。

由于操作上比較多的設(shè)計(jì)都是隱性的例如滑動(dòng)之類，需要手勢(shì)動(dòng)畫作提示。

塊內(nèi)元素滾動(dòng)時(shí)不流暢，或不能滾動(dòng)問題。

由于設(shè)計(jì)師設(shè)計(jì)的布局復(fù)雜度高，會(huì)出現(xiàn)比較多的元素需使用絕對(duì)定位。

如果頁面是推廣頁面，絕大部分用戶都是首次進(jìn)入，而設(shè)計(jì)中的元素前端不能復(fù)現(xiàn)只能使用圖片時(shí)，會(huì)產(chǎn)生加載時(shí)間較長(zhǎng)的問題。

問題有這么多，我來一個(gè)個(gè)說。

問題1的解決方案是上傳前預(yù)壓縮，其實(shí)就是將原來的圖片大小縮小到你可以接受的程度，再上傳給服務(wù)器。使用的是canvas的接口和FileReader對(duì)象來進(jìn)行操作，具體實(shí)現(xiàn)就不說了看這《使用HTML5的兩個(gè)api，前端js完成圖片壓縮。》。其次是文件的異步上傳，可以使用FormData把要提交的內(nèi)容整合就可以了，減少很多麻煩，代碼如下：

$(document.forms["ajax"]).submit(function(e){
    var formData = new FormData(this)；
    $.ajax({
        ...
        type: "post",
        data: formData,
        /*
         * 由于jquery會(huì)默認(rèn)處理提交數(shù)據(jù)，所以必須關(guān)閉。
         * XMLHttpRequest會(huì)對(duì) formdata 進(jìn)行正確的處理
         */
        processData: false, 
        //原理同上，XMLHttpRequest會(huì)自動(dòng)加上正確的Content-Type
        contentType: false,
        ...
    })
});

最近有空把圖片壓縮的代碼做成插件了?？梢钥催@：

  
https://coding.net/u/packy/p/ImageCompress/git

問題2，這個(gè)寫個(gè)動(dòng)畫庫通用了就好XD，解決方法很多。

問題3，塊內(nèi)滑動(dòng)問題，由于我這個(gè)卡內(nèi)滑動(dòng)元素還是一個(gè)fixed了的塊，所有我參考了bootstrap的modal模塊是如何處理的，至于百度出來的大多數(shù)并沒什么卵用╮(╯_╰)╭。先上代碼：

 /*可滾動(dòng)的塊：*/
 overflow-x: hidden;
 overflow-y: auto;
 -webkit-overflow-scrolling: touch; 

 /*塊內(nèi)加上一個(gè)div：*/
 -webkit-transform: translate(0, 0);
 width: auto;

到底什么機(jī)制導(dǎo)致能解決這個(gè)問題目前還沒時(shí)間去深究，如果看文章的你知道請(qǐng)務(wù)必和我說說！

問題4，該如何解決呢？這個(gè)其實(shí)得和設(shè)計(jì)師溝通互相理解，具體看會(huì)項(xiàng)目成本和耗時(shí)，不得就改設(shè)計(jì)吧！但是還是會(huì)有必須那樣設(shè)計(jì)的問題，所有這里建議使用sass來處理不同手機(jī)尺寸的處理，能大大減少手寫代碼。上我先的一段處理（各位看官輕噴，我就看了一上午sass文檔）。

//各手機(jī)尺寸，和比例。比例這里因設(shè)計(jì)給的是ip6的，所有就拿它來做基準(zhǔn)。
$iPhone5: 320px 523px 0.85;
$iPhone6: 375px 622px 1;
$iPhone6-P: 414px 691px 1.1;
$screens: $iPhone5 $iPhone6 $iPhone6-P;

//用于套屏幕處理的
@mixin max-screen($res){
  @media only screen and ( min-width: $res )
  {
    @content;
  }
}

$btnImgSize: 191px 89px, 228px 94.5px, 128px 48.5px, 170px 67.5px, 308px 48px, 308px 48px, 308px 48px, 121.5px 129.5px;
@for $i from 1 through 8 {
    .ui-img#{$i} {
        background-image: url(images/btn-img#{$i}.png);
    }
}
//循環(huán)屏幕數(shù)組
@each $screen in $screens {
    //套用上面預(yù)設(shè)的屏幕代碼
    @include max-screen(nth($screen,1) - 1) {
        @for $i from 1 through 8 {
            .ui-img#{$i} {
                width: nth(nth($btnImgSize,$i),1) * nth($screen,3);
                height: nth(nth($btnImgSize,$i),2) * nth($screen,3);
            }
        }
    }
}

問題5，這個(gè)盡量和設(shè)計(jì)師談妥，不行就得處理圖片加載了，如果大圖多而且都是用到img標(biāo)簽的得寫個(gè)預(yù)加載功能，不然還要?jiǎng)赢嬍裁吹氖状渭虞d基本看不出，因?yàn)閳D片都沒加載完你動(dòng)畫能看的出來么╮(╯_╰)╭ ，這里就不說預(yù)加載了（看官請(qǐng)看這Javascript實(shí)現(xiàn)圖片的預(yù)加載功能）。還有單頁面使用到background里的盡量弄成雪碧圖，但是單元面里分成多頁顯示的，有先后次序的，還是每頁的圖片分開打包吧，瀏覽器會(huì)異步加載的了。

下周壓力略大要弄個(gè)打地鼠游戲，雖然之前用egret寫過游戲，但是對(duì)于egret新知識(shí)不了解，想提高工作效率還得去學(xué)，祝我順利吧。