摘要：由于操作上比較多的設計都是隱性的例如滑動之類，需要手勢動畫作提示。如果頁面是推廣頁面，絕大部分用戶都是首次進入，而設計中的元素前端不能復現只能使用圖片時，會產生加載時間較長的問題。各手機尺寸，和比例。

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

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

由于操作上比較多的設計都是隱性的例如滑動之類，需要手勢動畫作提示。

塊內元素滾動時不流暢，或不能滾動問題。

由于設計師設計的布局復雜度高，會出現比較多的元素需使用絕對定位。

如果頁面是推廣頁面，絕大部分用戶都是首次進入，而設計中的元素前端不能復現只能使用圖片時，會產生加載時間較長的問題。

問題有這么多，我來一個個說。

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

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

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

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

問題2，這個寫個動畫庫通用了就好XD，解決方法很多。

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

 /*可滾動的塊：*/
 overflow-x: hidden;
 overflow-y: auto;
 -webkit-overflow-scrolling: touch; 

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

到底什么機制導致能解決這個問題目前還沒時間去深究，如果看文章的你知道請務必和我說說！

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

//各手機尺寸，和比例。比例這里因設計給的是ip6的，所有就拿它來做基準。
$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);
    }
}
//循環屏幕數組
@each $screen in $screens {
    //套用上面預設的屏幕代碼
    @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，這個盡量和設計師談妥，不行就得處理圖片加載了，如果大圖多而且都是用到img標簽的得寫個預加載功能，不然還要動畫什么的首次加載基本看不出，因為圖片都沒加載完你動畫能看的出來么╮(╯_╰)╭ ，這里就不說預加載了（看官請看這Javascript實現圖片的預加載功能）。還有單頁面使用到background里的盡量弄成雪碧圖，但是單元面里分成多頁顯示的，有先后次序的，還是每頁的圖片分開打包吧，瀏覽器會異步加載的了。

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