Cách tối ưu để xử lý hình ảnh bị hỏng là gì?

Question

Vì vậy, dường như có một số cách để xử lý hình ảnh bị hỏng trên trang html. Tôi muốn biết cách sử dụng phổ biến là gì và cách nào được xem là phương pháp hay nhất?

Để bắt đầu tôi đã xem xét một số bản thân mình thích:

function imgErr(source) {  
    source.src = /images/missing.jpg"; 
    source.onerror = ""; 
    return true; 
} 
<img src="test.jpg" alt="test" title="test" onerror="imgErr(this);" /> 

Ưu điểm: làm việc mọi lúc, sự kiện này sẽ luôn luôn bị bắt. Người dùng không bao giờ thấy hình ảnh bị hỏng. Dường như hoạt động tốt trên các trình duyệt. Nhược điểm: thẻ onerror yêu cầu trên mỗi hình ảnh, chức năng imgErr (nguồn) cần phải được người đứng đầu để bắt lỗi, làm chậm những người sử dụng trải qua thời gian tải

$('img').error(function(){ 
    $(this).attr('src', 'missing.jpg'); 
}); 

Ưu điểm: rất ít mã, hoạt động trên tất cả hình ảnh mà không thay đổi đánh dấu của họ, có thể diễn ra bên ngoài của người đứng đầu Nhược điểm: có thể bỏ lỡ các sự kiện lỗi tùy thuộc vào tốc độ của các trang sự kiện onload, chậm cho người sử dụng trải nghiệm thời gian tải

$(window).load(function() { 
    $("img").each(function() { 
     if (!this.complete || typeof this.naturalWidth == "undefined" || this.naturalWidth == 0) { 
      var src = $(this).attr("src"); 
      var suffix = src.substring(src.length - 6, src.length).split('.')[0]; 
      suffix = suffix.charAt(suffix.length - 1);    
      $(this).attr("src", "/static/images/generic/missing_" + suffix + ".jpg"); 
     } 
    }); 
}); 

Ưu điểm: có thể được đặt ở bất cứ đâu trên trang, sẽ sửa hình ảnh bất kể khi nào nó chạy, không làm chậm người dùng s thời gian tải có kinh nghiệm Nhược điểm: hiển thị hình ảnh bị hỏng cho đến khi nó chạy tạo trải nghiệm người dùng kém

Trong trường hợp tải thời gian của tôi là vấn đề lớn nhất nhưng tôi không thể có tùy chọn cuối cùng hoạt động trong IE đúng khi thay đổi và không có hình ảnh bị hỏng như nhau!

Chúc mừng, Denis

Answer 1

Một suy nghĩ mà mùa xuân đến cái tâm là để tạo ra một bộ xử lý hình ảnh ở máy chủ web của bạn, ví dụ:

<img src="fetchimage.aspx?name=test.jpg" alt="test" title="test" /> 

Bỏ qua aspx, rõ ràng là nó muốn được thay thế bằng bất cứ điều gì công nghệ kịch bản máy chủ ưa thích của bạn là. Sau đó, trình xử lý đó có thể xử lý các tên hình ảnh không có mặt bằng cách cung cấp missing.jpg của bạn cho tất cả các tên hình ảnh không xác định.

Khác với bạn bị mắc kẹt với các tùy chọn bạn cung cấp cho đến khi tôi có thể nhìn thấy. Bất kỳ javascript nào chạy trước khi trang đã tải các rủi ro không lặp lại qua thẻ img chưa nhận được và bất kỳ tập lệnh nào chờ trang sẵn sàng sẽ có nguy cơ người dùng nhìn thấy hình ảnh bị hỏng.

Rock-> Bạn < -Hardplace

Answer 2

Theo tôi, sử dụng thẻ alt là đủ và không có cần phải thêm phức tạp cho trang bằng cách kiểm tra nó mỗi khi sử dụng javascript.

Tất nhiên bạn cần phải kiểm tra từng thời gian mà bạn không có hình ảnh bị hỏng. There are tools to do it.

Answer 3

Lý tưởng nhất là thẻ alt chỉ nên được sử dụng. Nếu điều này là quan trọng, giải pháp javascript thực sự không lý tưởng vì nó sẽ không hoạt động nếu JS bị tắt. Tuy nhiên bạn có thể làm loại giải pháp phía máy chủ. Một cái gì đó trong php có thể được thực hiện như thế này nhưng sẽ yêu cầu một cơ sở dữ liệu hoặc một số loại cách thiết lập các biến.

<?php 
if($image !== ''){?> 
<?php echo '<img src="$imgsrc" alt="$imgalt" />' ?> 
} 
<?php else { 
<?php echo '<img src="$imgmissing" alt="$imgalt" />' ?> 
} ?> 
<?php } ?>