Javascript函數調用得太快

Question

我遇到了一個Javascript函數的問題，該函數顯然會被調用得太快。我有一種預感，這是一個懸念問題，但我不確定。

所以，我有該功能被分配給onclick一個<img>的：

function setModalPicture(picName){ 
 
    
 
    //Build the path to the picture 
 
    var pic= 'assets/img/art/'+picName; 
 
     
 
    //Set the picture 
 
    $('#g-modal-img').attr('src', pic);  
 
    
 
    adjustModalPadding();   
 
    
 
}

意圖是＃克模態-IMG的src屬性應被設置爲img，然後才應調用adjustModalPadding。這是因爲adjustModalPadding需要#g-modal-img的高度，在src設置爲<img>之前爲零。但是，我注意到這不能正常工作，並且如果我使adjustModalPaddin g登錄到控制檯的高度#g-modal-img，它顯示爲零。我認爲這意味着該函數在src被設置爲<img>之前被調用。

Answer 1

你需要等待圖像加載：

function setModalPicture(picName){ 

    //Build the path to the picture 
    var pic= 'assets/img/art/'+picName; 

    //Set the picture 
    var img = $('#g-modal-img'); 
    img.one("load", adjustModalPadding).attr('src', pic); 
    if (img[0].complete) { 
     img.off("load", adjustModalPadding); 
     adjustModalPadding();   
    } 
} 

注意上面的順序，因爲它是重要的：

1. 首先，用一次性的處理程序掛鉤load事件（one）。
2. 然後，設置src。
3. 檢查圖像是否已經完成：如果是，請刪除處理程序並立即調用您的函數;否則，當load觸發時，它將調用adjustModalPadding並將其作爲處理程序移除。

您可能需要增加搬運到錯誤...

---

這裏有一個工作示例：

function setModalPicture(picName) { 
 

 
    //Build the path to the picture 
 
    var pic = picName; // 'assets/img/art/'+picName; 
 

 
    //Set the picture 
 
    var img = $('#g-modal-img'); 
 
    img.one("load", adjustModalPadding).attr('src', pic); 
 
    console.log("img[0].complete after setting src: " + img[0].complete); 
 
    if (img[0].complete) { 
 
    img.off("load", adjustModalPadding); 
 
    adjustModalPadding(); 
 
    } 
 
} 
 

 
function adjustModalPadding() { 
 
    var img = $("#g-modal-img")[0]; 
 
    console.log("Size: " + img.width + "x" + img.height); 
 
} 
 
$("input[type=button]").on("click", function() { 
 
    console.log("img[0].complete before starting: " + $("#g-modal-img")[0].complete); 
 
    setModalPicture("https://graph.facebook.com/1035045703246692/picture?type=large"); 
 
});

<!-- In a comment, you said it starts out with src="" --> 
 
<img id="g-modal-img" src=""> 
 
<input type="button" value="Click Me"> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

，在Chrome瀏覽器對我的作品， Firefox和IE11。

---

或者，您也可以通過克隆創建替換img元素：

function setModalPicture(picName) { 
 

 
    //Build the path to the picture 
 
    var pic = picName; // 'assets/img/art/'+picName; 
 

 
    //Set the picture 
 
    var img = $("#g-modal-img"); 
 
    var newImage = img.clone(); 
 
    img.replaceWith(newImage); 
 
    newImage.one("load", adjustModalPadding).attr('src', pic); 
 
    console.log("newImage[0].complete after setting src: " + newImage[0].complete); 
 
    if (newImage[0].complete) { 
 
    newImage.off("load", adjustModalPadding); 
 
    adjustModalPadding(); 
 
    } 
 
} 
 

 
function adjustModalPadding() { 
 
    var img = $("#g-modal-img")[0]; 
 
    console.log("Size: " + img.width + "x" + img.height); 
 
} 
 
$("input[type=button]").on("click", function() { 
 
    console.log("img[0].complete before starting: " + $("#g-modal-img")[0].complete); 
 
    setModalPicture("https://graph.facebook.com/1035045703246692/picture?type=large"); 
 
});

<!-- In a comment, you said it starts out with src="" --> 
 
<img id="g-modal-img" src=""> 
 
<input type="button" value="Click Me"> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

，在Chrome瀏覽器，Firefox和IE11還爲我工作。

---

最後，您可以從頭開始創建（未克隆）的替代img元素：

function setModalPicture(picName) { 
 

 
    //Build the path to the picture 
 
    var pic = picName; // 'assets/img/art/'+picName; 
 

 
    //Set the picture 
 
    var img = $("#g-modal-img"); 
 
    var newImage = $("<img>").attr("id", "g-modal-img"); 
 
    img.replaceWith(newImage); 
 
    newImage.one("load", adjustModalPadding).attr('src', pic); 
 
    console.log("newImage[0].complete after setting src: " + newImage[0].complete); 
 
    if (newImage[0].complete) { 
 
    newImage.off("load", adjustModalPadding); 
 
    adjustModalPadding(); 
 
    } 
 
} 
 

 
function adjustModalPadding() { 
 
    var img = $("#g-modal-img")[0]; 
 
    console.log("Size: " + img.width + "x" + img.height); 
 
} 
 
$("input[type=button]").on("click", function() { 
 
    console.log("img[0].complete before starting: " + $("#g-modal-img")[0].complete); 
 
    setModalPicture("https://graph.facebook.com/1035045703246692/picture?type=large"); 
 
});

<!-- In a comment, you said it starts out with src="" --> 
 
<img id="g-modal-img" src=""> 
 
<input type="button" value="Click Me"> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 2

當加載圖像您可以使用事件：

var logo = document.getElementById('g-modal-img'); 

logo.addEventListener("load", function() { 
    adjustModalPadding();   
};