2014-03-30 2 views
0

나는 이미지의 크기를 읽고 높이가 150보다 큰 경우 여백을 조절하려고합니다. 하지만이 코드를 실행할 때 콘솔에 항상 '0'이 표시됩니다.Javascript가 너무 느림?

 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가 높이 속성을 읽기에는 너무 느립니다.

누군가 나를 도울 수 있기를 바랍니다.

+0

크롬 또는 파이어 폭스에서 개발자 도구를 열고 해당 아약스 전화에 대한 시간 응답을 확인한 경우 그 내용은 무엇입니까? – vittore

+2

동기식 아약스는 일반적으로 꽤 나쁜 생각으로 간주됩니다. – Pointy

+0

자바 스크립트가 느리지는 않지만 천천히 Cincinatti에서 이미지를 다운로드하고 있습니다. 그것이 완료 될 때까지, 우리는 이야기 크기를 모른다. – rupps

답변

5

현재 complete에있는 코드를 coverImg.onload 처리기로 옮깁니다. 예를 들면 :

완전히 장전 된 후에 만 ​​ <img> 요소의 높이를 확인할 수 있습니다 브라우저와 같은
coverImg.onload = function() { 
    if(document.getElementById('userCover').height > 150) { 
    var regulate = (150 - this.height)/2; 
    // ... 
    } 
} 
coverImg.src = dataArray[1]; 

... - 그리고 complete 콜백이 그 전에 해고된다.

+0

정말 고마워요, 완벽하게 일했습니다! :) –