jQuery的：抓住一個圖像的寬度增加圖像

Question

可能是一個簡單的解決方案之後，但我堅持與它的晚... :)

$j('#thisImage').html('<img src="image.jpg" id="box" />'); 
var imgWidth = $j('#box').width(); 

當我做一個console.log(imgWidth)它返回0 ...

我很確定這是因爲.html(...)在調用width(...)調用之前未完全完成。我已經用緩存的圖像進行了測試，它工作正常，並給我正確的圖像寬度...但那些沒有緩存返回0.

所以我正在尋找一個很好的解決方案，等待.html(...)電話完成後再繼續我的.width(...)致電

任何幫助，非常感謝。謝謝！

---

更新1

使用下面CMS的答案... （這可以幫助大家瞭解我的困境）

如果我這樣做：

var imgWidth = 0; 

$j('<img src="image.jpg" id="box" />').appendTo("#thisImage").load(function() { 
    imgWidth = $j('#box').width(); 

    //my first log 
    console.log("Width 1: " + imgWidth);     
});    

//my second log 
console.log("Width 2: " + imgWidth); 

if (imgWidth > 100) { 
    //do something 
} 

然後//my second log作爲.load返回//my first log之前還沒有完成完成...

因此我if語句總是false作爲imgWidth總是0 ...

即至.load完成......但隨後一切都太遲了......

---

更新2：看到我所看到

使用瑞安的回答修改...

轉到jsbin.com - >包括從下拉菜單「jQuery的」 - >在的Javascript標籤更換W /下面，然後點擊輸出選項卡

function loadImg(url, func) { 
    var img = new Image(); 
    img.onload = func; 
    img.src = url; 
    return img; 
} 

$(document).ready(function() { 
    var myWidth = 0; 

    var myImg = loadImg("http://sstatic.net/so/img/logo.png", function() { 
        myWidth = $(this).width(); 
        $('#hello').append("Show Me First: " + myWidth + "<br />"); 
       }); 


    $(myImg).appendTo("body"); 

    if(myWidth > 0) { 
     $('#hello').append("Success!");  
    } else { 
     $('#hello').append("Show Me Second: " + myWidth + " <- BOO! Out of Order! <br />"); 
    } 

}); 

Answer 1

嘗試類似下面的代碼：

function loadImg(url, func) { 
    var img = new Image(); 
    img.onload = func; 
    img.src = url; 
    return img; 
} 

var myImg = loadImg("lulz.jpg", function() { 
    console.log($j(this).width()); 
}); 

$j(myImg).appendTo("#thisImage"); 

這幾乎將執行以下操作：

• 設置在後臺加載圖像，交給受瀏覽器
• 允許jQuery繼續構建DOM元素，追加它等
• 我們的自定義loadImg函數接受一個回調函數，當圖像準備好時觸發

當然，不言而喻，你想在DOM準備好之後做到這一點，所以document.ready是你的朋友和所有的爵士樂。玩的開心。 ; d

編輯，響應OP的編輯：

你的代碼如下：

function loadImg(url, func) { 
    var img = new Image(); 
    img.onload = func; 
    img.src = url; 
    return img; 
} 

$(document).ready(function() { 
    var myWidth = 0; 

    var myImg = loadImg("http://sstatic.net/so/img/logo.png", function() { 
        myWidth = $(this).width(); 
        $('#hello').append("Show Me First: " + myWidth + "<br />"); 
       }); 


    $(myImg).appendTo("body"); 

    // This section is problematic... 
    if(myWidth > 0) { 
     $('#hello').append("Success!");  
    } else { 
     $('#hello').append("Show Me Second: " + myWidth + " <- BOO! Out of Order! <br />"); 
    } 
}); 

我評論有問題的部分;圖像加載是一個異步的東西。在該塊被擊中的時候，不能保證你的圖像準備就緒。也許我應該在我之前的回答中指出了這一點，但在這種情況下，最好在圖像的回調函數中對您的DOM操作執行全部，因此在圖像實際準備就緒時會觸發它。

評論這個，而不是鍵入另一個段落，但像...

// Move this outside the $(document).ready, for scoping reasons... 
var myWidth = 0; 

function loadImg(url, func) { 
    var img = new Image(); 
    img.onload = function() { func(img); }; 
    img.src = url; 
    return img; 
} 

$(document).ready(function() { 
    loadImg("http://sstatic.net/so/img/logo.png", function(img) { 
     var myImg = $(img); 

     // Since you can't get the width until the image is appended, get around it 
     // by throwing it in hidden; get the width, then unhide it and do what you want. 
     myImg.css({ 
      "position": "absolute", 
      "visibility": "hidden" 
     }).appendTo("body"); 

     myWidth = myImg.width(); 

     myImg.css({ 
      "position": "normal", 
      "visibility": "visible" 
     }); 

     if(myWidth > 0) { 
      $('#hello').append("Success!");  
     } else { 
      $('#hello').append("Show Me Second: " + myWidth + " <- BOO! Out of Order! <br />"); 
     } 
    }); 
}); 

Answer 2

你可以建立的圖像元素與jQuery function，請使用appendTo將其插入#thisImage元素內，將load事件綁定到圖像上：

$j('<img src="image.jpg" id="box" />').appendTo('#thisImage').load(function() { 
    console.log($j(this).width()); // image loaded, show width 
});