Sủi bọt có sẵn cho các sự kiện tải ảnh không?

Question

Tôi có thể sử dụng:

window.addEventListner(); 

theo một cách nào đó.

Tất cả hình ảnh của tôi có display = 'none'.

Khi hình ảnh đã được nạp,

Tôi muốn thiết display = 'inline'

Bằng cách này tôi có thể bình thường hóa những gì được hiển thị trong khi hình ảnh đang được tải về.

Trong trường hợp này, tôi không thể tải trước hình ảnh của mình.

Answer 1

Sự kiện load/onload không làm bong bóng (reference, reference), vì vậy những gì bạn đang yêu cầu là không thể. Bạn sẽ phải đính kèm một trình xử lý sự kiện cho mỗi nút hình ảnh.

Answer 2

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

---

Nếu không có thư viện:

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

Answer 3

Bạn có thể sử dụng các handler Image.onload sự kiện nhưng không có bọt liên quan.

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

Các "tải" Sự kiện này sẽ không kích hoạt nếu hình ảnh được tình cờ nạp đã; do đó, chúng tôi kiểm tra xem complete đã được đặt chưa.

Answer 5

Sử dụng chụp nghe sự kiện trên một số nút DOM khác hơn window (body hoặc cha mẹ khác của các yếu tố hình ảnh quan tâm):

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

Với điều này bạn không cần phải (lại) đính kèm xử lý sự kiện trong khi lặp qua document.images.

Và điều này cũng sẽ hoạt động với hình ảnh được chèn động.

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