負載事件後追加到DOM

圖片我讀過jquery: how to listen to the image loaded event of one container div?負載事件後追加到DOM

我的情況是類似的：我有一個<body contentEditable="true"/>標記，編輯與可視化編輯器。這個body的innerHTML被編輯器修改並且事件被觸發。

問題是我必須處理調整大小的邏輯。在library目前的大小調整的邏輯是：

this.$body.on('keyup keydown paste change focus', function() { 
     return _this.adjustHeight(); 
    });

這工作很細，除了更改事件不會觸發就拖&下降的圖像，但fortunatly一個焦點事件被觸發。但是，當事件被觸發時，圖像還沒有加載，所以它不會調整到合適的尺寸。

使用Js代碼最近添加到DOM中的圖像的圖像加載的最佳方式是什麼？我嘗試使用$(window).load(fn)但沒有收到任何東西。

來源

2014-02-26 Sebastien Lorber

不幸的是，_HTMLImageElement_上的_load_事件不會冒泡。 –

那麼，難道你不能在刪除的圖像上添加一個'load'監聽器嗎？既然你知道'focus'被觸發了，你可以檢查'body'中的一個圖像是否是新的（在'data-'屬性中放置一些標誌）並添加一個'load'監聽器。 – Zeta

@Zeta編輯drop代碼可能會更好，如果你創建了''，你可以使用'addEventListener'來爲_load_啓動一個'new Event'（叫做''image_loaded「'）， *泡沫。 –

您可以將adjustHeight函數綁定到圖像元素的加載事件上，就像這樣;

this.$body.on('keyup keydown paste change focus', function() { 
    $(this).find('img').off('load', _this.adjustHeight).on('load', _this.adjustHeight); 
    return _this.adjustHeight(); 
});

$(this)相同this.$body（但允許你提取功能外它的當前持有人）。
.find('img')得到內$(this)所有圖像元素（這樣可編輯區域內）
.off('load', _this.adjustHeight)去除圖像元素的事件處理程序，如果沒有這個，你可能最終會多次綁定功能，這也將導致它被剛打電話儘可能多的時間，這可能會成爲一個性能問題容易
.on('load', _this.adjustHeight)增加了事件處理的圖像元素之一，所以被稱爲當圖像load版

什麼想到的是，你可能需要節流形容詞adj ustHeight函數不會被過多地調用，以防止當用戶一次拖放大量圖像時凍結瀏覽器（除非它不像我想象的那麼昂貴）。但是，如果這確實是一個問題，那麼您可能還需要使用其他解決方案來實現這一點。

來源

2014-02-26 12:45:31

不要只是粘貼代碼作爲答案，給一點解釋 –

道歉，我沒有太多時間，但在忘記整個問題之前看到了我想分享的潛在解決方案。我用更多的信息更新了答案。 –

謝謝。其實我發現了另一個問題。焦點事件在img節點被附加到dom之前被觸發:(所以它不能很好地工作（我試圖用這個代碼來解決這個問題）：http://stackoverflow.com/a/14570614/82609）。順便說一句，我認爲你的代碼可能無法很好地處理已經加載到緩存中的圖像，因爲加載事件可能會在事件監聽器設置之前觸發 –

負載事件後追加到DOM

回答

相關問題