圖片在document.ready上沒有寬度

Question

我有一個功能，我想用來調整圖像大小：

http://jsfiddle.net/eUurB/

當我在document.ready上運行它時，它沒有任何效果; 返回的圖像大小是'0'（您可能會注意到它在小提琴中起作用...我不確定是什么導致這種不一致的說實話，但在我的測試網站上它肯定會返回'0'的高度和寬度”。

這是預期的行為嗎？ 如果是這樣，當圖像有寬度時，我怎么能做一個簡單的監聽器？

Answer 1

這是一種超安全的方法，它不需要等待加載所有圖像，並處理在DOM准備好之前可以緩存或完成加載圖像的情況。

$('#my_img').one('load',function(){
    resizeImgByArea('logo', 50);
})
  .filter(function(){
     return this.complete;
})
  .load();

---

• .one('load',...)在調用它時立即刪除它。 你只需要一次。

• .filter()將返回已加載的圖像。 如果不是，則不返回任何元素。

• .load()將手動調用處理程序。 僅在圖像已加載時才會出現這種情況。

---

因此，如果在DOM准備好之前預先加載了圖像，我們將手動調用其.load()處理程序。 如果沒有，它的處理程序將在加載時被調用。

Answer 2

圖像未在document.ready時加載。 而是使用jQuery的.load（）方法 。

$('#logo').load( function() {
    resizeImgByArea('logo', 500);
});

Answer 3

來自jQuery(callback)方法的jQuery文檔 ：

此函數的行為就像$(document).ready()

當我們轉到$(document).ready()上的$(document).ready() ，我們發現：

描述：指定DOM完全加載時要執行的函數。

所以它實際上正在做它應該做的事情。 它不是在等待其他資源（如圖像）加載; 一旦DOM准備好，它就會執行你的回調。

你可以得到的是<img>元素和附加load事件偵聽器，但如果像真的完成加載之前，您可以附加了嗎？ 您的回調將永遠不會被執行。

它不漂亮，但我認為你能做的最安全的事情就是等待整個頁面完成加載：

$(window).load(function () {
    resizeImgByArea('logo', 50);
});