[年会抽奖]调试头像尺寸

zouyang0921
1 parent 14e2763d
Showing 1 changed file with 38 additions and 72 deletions
mobile.js
@@ -107,7 +107,7 @@ var action = {
         if (action.userInfo) {
             var userAvatar = action.userAvatar || defaultAvatar;
             $('#home_user_avatar').attr('src', userAvatar);
-            action.loadImage(userAvatar, '.user-avatar .avatar-img', '.user-avatar .avatar-img-wrap');
+            action.loadImage('.user-avatar .avatar-img', '.user-avatar .avatar-img-wrap');
             $('#home_user_name').html(action.userInfo.realname);
             $('#home_prize_no').html(action.userInfo.prize_no);
             $('#home_table_no').html(action.userInfo.table_no);
@@ -144,9 +144,14 @@ var action = {
                     localId: localIds.toString(), // 需要上传的图片的ID，由chooseImage接口获得
                     isShowProgressTips: 1, // 进度提示
                     success: function(res) {
-                        var imgHtml = '<img class="pic-avatar" src="' + localIds +'">';
-                        $('.pic-avatar-wrap').html(imgHtml);
-                        action.loadImage(localIds, '.pic-avatar', '.pic-avatar-wrap');
+                        $('.pic-avatar').attr('src', localIds);
+                        $('.pic-avatar').css({
+                            width: '',
+                            height: '',
+                            'margin-left': '',
+                            'margin-top': ''
+                        });
+                        action.loadImage('.pic-avatar', '.pic-avatar-wrap');
                         action.mediaId = res.serverId; // 返回图片的服务器端ID，即 mediaId
                         console.log('action.mediaId: ', action.mediaId);
                         $('#upload_unavailable').hide();
@@ -166,77 +171,38 @@ var action = {
             }
         });
     },
-    loadImage: function(src, dom, parent) {
+    loadImage: function(dom, parent) {
         var width = $(parent).width();
-        console.log('parent-width: ', width);
-        var img = new Image();
-        img.src = src;
-        if (img.complete) {
-            console.log('img complete');
-        } else {
-            console.log('else');
-            img.onload = function() {
-                console.log('img onload');
-                console.log('width: ' + img.width);
-                console.log('height: ' + img.height);
-                var ratio = img.width / img.height;
-                if (ratio > 1) {
-                    img.height = width;
-                    img.width = width * ratio;
-                    var margin = (img.width - width) / 2;
-                    $(dom).css({
-                        'margin-left': -margin + 'px'
-                    });
-                } else if (ratio < 1) {
-                    img.width = width;
-                    img.height = width / ratio;
-                    var margin = (img.height - width) / 2;
-                    $(dom).css({
-                        'margin-top': -margin + 'px'
-                    });
-                } else {
-                    img.width = width;
-                    img.height = width;
-                }
+        $(dom).on('load', function() {
+            var imgWidth = $(dom).width();
+            var imgHeight = $(dom).height();
+            var ratio = imgWidth / imgHeight;
+            if (ratio > 1) {
+                imgHeight = width;
+                imgWidth = width * ratio;
+                var margin = (imgWidth - width) / 2;
+                $(dom).css({
+                    width: imgWidth + 'px',
+                    height: imgHeight + 'px',
+                    'margin-left': -margin + 'px'
+                });
+            } else if (ratio < 1) {
+                imgWidth = width;
+                imgHeight = width / ratio;
+                var margin = (imgHeight - width) / 2;
+                $(dom).css({
+                    width: imgWidth + 'px',
+                    height: imgHeight + 'px',
+                    'margin-top': -margin + 'px'
+                });
+            } else {
+                $(dom).css({
+                    width: width + 'px',
+                    height: width + 'px'
+                });
             }
-        }
+        });
     },
-    // loadImage: function(dom, parent) {
-    //     var width = $(parent).width();
-    //     console.log('parent: ', width);
-    //     $(dom).on('load', function() {
-    //         var imgWidth = $(dom).width();
-    //         var imgHeight = $(dom).height();
-    //         console.log('dom--onload: ', $(dom));
-    //         console.log('width: ' + imgWidth);
-    //         console.log('height: ' + imgHeight);
-    //         var ratio = imgWidth / imgHeight;
-    //         if (ratio > 1) {
-    //             imgHeight = width;
-    //             imgWidth = width * ratio;
-    //             var margin = (imgWidth - width) / 2;
-    //             $(dom).css({
-    //                 width: imgWidth + 'px',
-    //                 height: imgHeight + 'px',
-    //                 'margin-left': -margin + 'px'
-    //             });
-    //         } else if (ratio < 1) {
-    //             imgWidth = width;
-    //             imgHeight = width / ratio;
-    //             var margin = (imgHeight - width) / 2;
-    //             $(dom).css({
-    //                 width: imgWidth + 'px',
-    //                 height: imgHeight + 'px',
-    //                 'margin-top': -margin + 'px'
-    //             });
-    //         } else {
-    //             $(dom).css({
-    //                 width: width + 'px',
-    //                 height: width + 'px'
-    //             });
-    //         }
-    //     });
-    // },
     // 上传头像
     uploadImage: function() {
         if (!action.mediaId) {