Làm thế nào để kiểm tra xem hình ảnh đã được tải bằng Javascript chưa?

Trong trình xử lý OnLoad trang web của tôi, tôi đang cố kiểm tra xem tất cả hình ảnh đã được tải chính xác hay chưa.Làm thế nào để kiểm tra xem hình ảnh đã được tải bằng Javascript chưa?

Tôi đang lặp lại trên tất cả các thẻ <img> và kiểm tra chúng bằng chức năng isImageLoaded() của tôi. Rất tiếc, chức năng của tôi chỉ hoạt động với Firefox và IE lên phiên bản 8.

Bất kỳ đề xuất nào về cách làm cho IE hoạt động trong IE 9 và 10?

function isImageLoaded(img) { 
    // check for IE 
    if (!img.complete) { 
     return false; 
    } 
    // check for Firefox 
    if (typeof img.naturalWidth != "undefined" && img.naturalWidth == 0) { 
     return false; 
    } 
    // assume it's ok 
    return true; 
}

Cập nhật: Hóa ra thủ phạm chính là onload có thể bị sa thải trước khi tất cả các hình ảnh được nạp bởi IE9 +. Điều gì sẽ là một kích hoạt tốt hơn để kiểm tra các hình ảnh trong trang? Tôi muốn kiểm tra tất cả chúng cùng một lúc và không phải với các trình xử lý OnLoad/OnError cá nhân.

Nguồn

2013-03-20 Gene Vincent

Cảm ơn sdespont! Tôi đang cố gắng tránh sử dụng thư viện để giảm kích thước trang. –

Bạn đã thử chỉ cần thêm trình xử lý sự kiện 'onload' cho mỗi hình ảnh và đếm số lần chúng kích hoạt? –

Tôi hiện đang sử dụng trình xử lý OnLoad của trang. Tôi sẽ giả định rằng chỉ được gọi một lần. Bạn có nghĩ rằng IE 9 + 10 gọi nó trước khi hình ảnh được tải hoàn toàn không? –

Trong trình xử lý OnLoad của trang web của tôi, tôi đang cố kiểm tra xem tất cả hình ảnh đã được tải chính xác chưa.

Tôi giả sử bạn đang sử dụng body.onload hoặc <body onload="">? Đây vẫn nên có nghĩa là tất cả hình ảnh đều được nạp — Tuy nhiên, bằng cách sử dụng:

window.addEventListener('load', function(){ 
    /// everything in the page has loaded now 
});

Hoặc cho các phiên bản cũ của trình duyệt IE:

window.attachEvent('onload', function(){ 
    /// everything in the page has loaded now 
});

Bạn sẽ nhận được một hành vi nhất quán hơn trên các trình duyệt, và tôi biết một thực tế rằng window.onload sẽ chỉ kích hoạt một khi everthing đã tải (bao gồm tất cả các tài nguyên khác như javascript và css tuy nhiên). Liên kết này có thể là thú vị:

window.onload vs <body onload=""/>

Vì vậy, trên nên thực hiện chức năng của mình một redundent chút, trừ khi bạn đang tiêm hình ảnh vào trang sau sự kiện onload đã bị sa thải. Tuy nhiên, nếu bạn muốn để tăng tốc và không phải chờ đợi cho mọi thứ để tải về bạn có thể sử dụng một dom người nghe sẵn sàng và sau đó thực hiện các phương pháp được đề cập bởi kennypu:

Cross Browser Dom Ready

Cũng giống như một lưu ý thêm , theo như tôi biết, image.complete nên làm việc cho tất cả các trình duyệt hiện đại:

https://developer.mozilla.org/en-US/docs/DOM/HTMLImageElement

Nguồn

2013-03-20 08:31:31 Pebbl

Tôi đã thực sự sử dụng window.onload và chuyển sang cửa sổ.addEventListener đã làm mọi việc tốt hơn một chút, nhưng đôi khi vẫn thất bại. Điều này làm cho tôi tin rằng đây thực sự là thời điểm khi trình xử lý OnLoad được gọi và IE 9 và 10 dường như gọi nó quá sớm ... –

@GeneVincent nếu bạn đăng thêm mã của mình cộng đồng StackOverflow có thể giúp bạn gỡ lỗi chính xác những gì đang diễn ra - cụ thể là trình xử lý 'onload' của bạn, nhưng càng nhiều thông tin càng tốt. – Pebbl

Làm thế nào để kiểm tra xem hình ảnh đã được tải bằng Javascript chưa?

Trả lời

Các vấn đề liên quan