LƯU Ý: Tôi đã viết điều này trong năm 2010, các trình duyệt trong tự nhiên là IE 8/9 beta, Firefox 3.x và Chrome 4.x. Xin vui lòng sử dụng này cho mục đích nghiên cứu, tôi nghi ngờ bạn có thể sao chép/dán này vào một trình duyệt hiện đại và có nó làm việc mà không có vấn đề.
CẢNH BÁO: Bây giờ là năm 2017 tôi vẫn nhận được điểm này ngay bây giờ và sau đó, vui lòng chỉ sử dụng thông tin này cho mục đích nghiên cứu. Tôi hiện không có ý tưởng làm thế nào để phát hiện tình trạng tải hình ảnh, nhưng có lẽ nhiều cách duyên dáng hơn để làm điều đó hơn này ... ít nhất tôi nghiêm túc hy vọng có. Tôi khuyên bạn KHÔNG nên sử dụng mã của mình trong môi trường sản xuất mà không cần nghiên cứu thêm.
tôi là một chút muộn để bên này, có lẽ câu trả lời này sẽ giúp người khác ...
Nếu bạn đang sử dụng jQuery không bận tâm với các xử lý sự kiện chứng khoán (onclick/onmouseover/etc), thực sự chỉ ngừng sử dụng chúng hoàn toàn. Sử dụng các phương thức sự kiện mà họ đã cung cấp trong số API của họ.
Điều này sẽ cảnh báo trước khi hình ảnh được thêm vào nội dung vì sự kiện tải được kích hoạt khi hình ảnh được tải vào bộ nhớ. Nó đang làm chính xác những gì bạn nói với nó: tạo một hình ảnh với src của test.jpg, khi test.jpg tải một cảnh báo, sau đó gắn nó vào cơ thể.
var img = $('<img src="test.jpg" />');
img.load(function() {
alert('Image Loaded');
});
$('body').append(img);
này sẽ cảnh báo, sau khi hình ảnh được đưa vào cơ thể, một lần nữa, làm những gì bạn nói với nó để: tạo một hình ảnh, thiết lập một sự kiện (không có bộ src, vì vậy nó có không tải), gắn hình ảnh vào phần thân (vẫn không có src), bây giờ đặt src ... bây giờ hình ảnh được nạp để sự kiện được kích hoạt.
var img = $('<img />');
img.load(function() {
alert('Image Loaded');
});
$('body').append(img);
$img.attr('src','test.jpg');
Bạn có thể dĩ nhiên cũng thêm một xử lý lỗi và hợp nhất một loạt các sự kiện sử dụng bind().
var img = $('<img />');
img.bind({
load: function() {
alert('Image loaded.');
},
error: function() {
alert('Error thrown, image didn\'t load, probably a 404.');
}
});
$('body').append(img);
img.attr('src','test.jpg');
mỗi yêu cầu của @ChrisKempen ...
Dưới đây là một cách điều khiển phi trường hợp xác định nếu những hình ảnh được chia sau khi DOM được nạp. Mã này là một dẫn xuất của mã từ một bài viết của StereoChrome sử dụng các thuộc tính naturalWidth, naturalHeight và hoàn chỉnh để xác định xem hình ảnh có tồn tại hay không.
$('img').each(function() {
if (this.naturalWidth === 0 || this.naturalHeight === 0 || this.complete === false) {
alert('broken image');
}
});
Tôi hoàn toàn không hiểu - bạn có muốn một giải pháp JS thuần túy duy nhất để phát hiện khi một hình ảnh đã được tải hay bạn đang tìm kiếm một thư viện thay thế cho jQuery để phát hiện khi một hình ảnh được tải? –
Tôi cũng rất vui. Tôi sẽ không lừa jQuery khi tôi sử dụng nó ở nơi khác; chỉ thể hiện sự nghi ngờ của tôi rằng đây là một vấn đề được giải quyết tốt trong một thư viện mà tôi không quen thuộc. –
Đừng quên cho chúng tôi biết bạn sẽ làm gì! –