檢查是否加載了動態添加的圖像

Question

我正在創建一個簡單的 html 頁面，其中一個圖像被動態添加到 div 中，如下所示

$(".step3html").html('<img class="mobimg thumbnail" src="img/'+keys+'">');

我想在圖像完全加載后調整容器的大小（它是絕對容器）。 那么如何檢查附加的圖像是否已加載並調用一些函數，我將根據整個容器寬度運行調整大小函數。

我在附加圖像后立即嘗試了下面的代碼，它似乎沒有觸發。

$(".mobimg").on('load', function() {
alert("das"); 
 });

這是測試https://jsfiddle.net/whhjtwpp/2/的小提琴

Answer 1

下面的代碼有效。

$(".step3html").html('<img class="mobimg thumbnail" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150">');

$(".mobimg").on('load', function() {
  alert("das");
});

試試這個小提琴。

https://jsfiddle.net/pparas/whhjtwpp/

你可能有不同的問題。 您是否檢查過控制台中keys的值？

編輯

這是一個工作小提琴。

https://jsfiddle.net/pparas/whhjtwpp/4/

Answer 2

您應該從新創建的元素img 。 此代碼有效。

<button id="btn">button</button>
<div id="div"></div>
<script type="text/javascript">
    $(document).ready(function () {
        $('#btn').click(function () {
            $('<img class="mobimg thumbnail" src="/images/hat22.jpg?a=' 
                + Math.random()/*ensure load from server*/ + '" />').load(function () {
                console.log('load');
                $('#div').empty().width($(this).prop('naturalWidth') + 10).append(this);
            });
        });
    });
</script>

Answer 3

你可以寫：

$('.mobimg').load(function(){
   //your code
});

當所有元素和子元素完全加載時，.load .load()被觸發。

Answer 4

1. 與所有事件一樣，在您嘗試將加載處理程序綁定到它之前，圖像元素必須存在。 這就是為什么https://jsfiddle.net/pparas/whhjtwpp/有效但https://jsfiddle.net/whhjtwpp/2/無效的原因。
2. 加載處理程序必須在圖像加載之前綁定。

典型的模式是創建一個圖像，綁定加載處理程序，然后設置src 。

Answer 5

添加一個事件監聽器，讓圖像通過 onload 宣布自己

<img class="mobimg thumbnail" onload='loadedImageFunction(this.id)' src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150">

然后編寫javascript函數