Czy są dostępne bulgotania dla zdarzeń ładowania obrazów?

Question

mogę użyć:

window.addEventListner(); 

w jakiś sposób.

Wszystkie moje zdjęcia mają display = 'none'.

Po załadowaniu obrazu,

Chcę ustawić display = 'inline'

ten sposób można normalizacji, co jest wyświetlane, gdy obraz jest pobierany.

W takim przypadku nie można załadować wstępnie obrazów.

Answer 1

Impreza load/onload nie bańka (reference, reference), więc co prosisz, nie jest możliwe. Będziesz musiał dołączyć procedurę obsługi zdarzeń do każdego węzła obrazu.

Answer 2

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

---

Bez bibliotek:

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

Answer 3

Można użyć obsługi Image.onload zdarzeń, ale nie ma zaangażowany bulgotanie.

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'; 
    } 
}); 

Zdarzenie „obciążenie” nie wywoła jeśli obraz jest nawiasem mówiąc już załadowany; w ten sposób sprawdzamy, czy jest już ustawiona complete.

Answer 5

Zastosowanie przechwytywanie zdarzeń słuchacza na pewnym węźle DOM innego niż window (body lub drugiego rodzica elementów graficznych zainteresowania):

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

Z tym nie ma do (re) attach programy do obsługi zdarzeń podczas iteracji poprzez document.images.

To samo dotyczy również dynamicznie wstawianych obrazów.

Same is true for image's error loading events. MDN: addEventListener