Javascript 太慢？

Question

我正在尝试读取图像的大小并在其高度大于 150 时调整其边距。但是在运行这段代码时，我总是在控制台中得到一个“0”:

        var coverImg;
        coverImg = document.getElementById('userCover');

        $.ajax({
                type: "POST",
                url: 'code/submit/submitGetUserData.php',
                data: {id: userID, what: 'all'},
                async: false,
                success:function(data,status){
                    var dataArray = data.split(',');

                    document.getElementById('userAvatar').src = dataArray[0];
                    coverImg.src = dataArray[1];
                    $('#userName').text(dataArray[2]);
                },
                error: function(){
                    alert("error occured");

                },
                complete: function(){
                    console.log(coverImg.height);

                    if(document.getElementById('userCover').height > 150)
                    {
                        var regulate = 0;
                        regulate = (coverImg.height - 150) / 2;
                        regulate = regulate * (-1);



                        coverImg.style.marginTop = regulate;
                    }
                }
        });

是不是JS读取height属性太慢了？!

我希望有人能帮助我!

Answer 1

移动当前放在complete中的代码进入coverImg.onload处理程序。例如:

coverImg.onload = function() {
   if(document.getElementById('userCover').height > 150) {
     var regulate = (150 - this.height) / 2;
     // ...
   }
}
coverImg.src = dataArray[1];

... 因为浏览器可以确定 <img> 的高度元素仅在完全加载后 - 和 complete在此之前触发回调。