Ẩn input = "image" nếu ảnh src không tìm thấy

Question

Tôi đang sử dụng hàm JavaScript sau để ẩn hình ảnh trên trang web của tôi trong trường hợp các hình ảnh nguồn không được tìm thấy:

function Image_OnError(image) { 
    image.onerror = ""; 
    image.style.visibility = "hidden"; 
    return true; 
} 

tôi thêm như sau thuộc tính cho hình ảnh của tôi gọi phương thức trên trong trường hợp có lỗi onerror="Image_OnError(this);".

Vấn đề là tôi cần phải làm tương tự cho các yếu tố <input type="image" /> nhưng không thể tìm ra cách để làm điều này vì yếu tố đầu vào dường như không có sự kiện OnError.

Tôi chỉ có thể bao gồm một hình ảnh bổ sung có cùng giá trị src làm đầu vào và sau đó sửa đổi mức hiển thị của phần tử đầu vào trên sự kiện OnError của hình ảnh, nhưng điều này có vẻ hơi lộn xộn.

Answer 1

Nếu bạn muốn bán hack, bạn có thể sử dụng sự kiện "document.ready" của jQuery và kiểm tra chiều cao của đầu vào.

EDIT: Để trả lời bạn trả lời câu hỏi của Aviator ở trên ... Bạn chỉ có thể sử dụng asp: LinkButton và bọc hình ảnh bên trong nó dưới dạng nội dung ... và sau đó sử dụng sự kiện OnCommand LinkButton.

Answer 2

Nó có cùng sự kiện onerror. Cái này làm việc cho tôi (trong chrome ít nhất):

<input type="image" onerror="alert(1);" src="http://xxx" /> 

Một cách khác có thể là để tải hình ảnh trong JS:

trên tải tài liệu:

$('input[type="image"]').each(function(){ 
    var img = new Image(); 
    var input = this; 
    img.onerror = function() { Image_OnError(input); } 
    img.src = this.src; 
}) 

Ngoài ra, bạn muốn tốt hơn ẩn chúng ngay từ đầu và chỉ hiển thị các thành phần có hình ảnh được tải thành công. Nếu không, bạn có thể sẽ có các yếu tố nhảy trên trang.