イメージの読み込みイベントにバブリングが使用できますか？

Question

は、私が使用できます：

window.addEventListner(); 

何らかの方法で。

すべての画像にはdisplay = 'none'があります。画像が読み込まれたら

、

は私がdisplay = 'inline'

私はイメージがダウンロードされている間に表示される内容を標準化することができるこの方法を設定したいです。

この場合、画像をプリロードできません。ライブラリなし

Answer 1

load/onloadイベントがバブル（reference、reference）しないので、何を求めていることはできません。各画像ノードにイベントハンドラをアタッチする必要があります。

Answer 2

$('img').on('load', function() { 
    $(this).show() 
}) 

---

：

window.onload = function() { 
    var imgs = document.querySelectorAll('img') 
    imgs.onload = function() { 
     this.style.display = 'inline'; 
    } 
} 

Answer 3

あなたはImage.onloadイベントハンドラを使用することができますが、関与発泡は全くありません。

var i = new Image; 
i.onload = function() { 
    this.style.display = 'block'; 
} 

Answer 4

Array.prototype.forEach.call(document.querySelectorAll('img'), function (elem) { 
    elem.addEventListener('load', function() { 
     this.style.display = 'inline'; 
    }); 
    if (elem.complete) { 
     elem.style.display = 'inline'; 
    } 
}); 

画像が偶然にすでにロードされている場合は、「ロード」イベントがトリガされません。したがって、completeが既に設定されているかどうかを確認します。

Answer 5

使用window以外のいくつかのDOMノード（bodyまたは関心の画像要素の他の親）にイベントリスナーをキャプチャ：あなたは添付（再）にはありません。これにより

document.body.addEventListener(
    'load', 
    function(event){ 
     var tgt = event.target; 
     if(tgt.tagName == 'IMG'){ 
      tgt.style.display = 'inline'; 
     } 
    }, 
    true // <-- useCapture 
) 

イベントハンドラはdocument.imagesを反復処理します。

これは動的に挿入された画像にも有効です。

Same is true for image's error loading events. MDN：あなたのための私の答えを更新しaddEventListener