Trình giữ chỗ Hình ảnh

Tôi đã xác định thẻ hình ảnh có màu nền sao cho nếu không có hình ảnh, màu sắc sẽ hiển thị nhưng biểu tượng hình ảnh bị hỏng đang hiển thị cách xóa hình ảnh đó?Trình giữ chỗ Hình ảnh

Tôi không muốn làm cho trang cồng kềnh bằng cách thêm jquery hoặc bất kỳ khung công tác nào, ngoài ra tôi không thể thêm bất kỳ loại div nào vào hình ảnh vì trang web gần như đã hoàn tất.

Tìm thấy câu trả lời chỉ với javascript

function ImgError(source){ 
source.src = "/images/noimage.gif"; 
source.onerror = ""; 
return true; 
} 

<img src="someimage.png" onerror="ImgError(this);"/>

Nguồn

2012-01-24 Pradyumna Challa

Bạn có thể chỉ định thuộc tính 'alt', ví dụ: ' my cute cat ' thì văn bản thay thế sẽ xuất hiện với màu nền bạn đã áp dụng. –

bạn có thể ẩn rằng việc sử dụng sau đây:

<img 
    src="my.png" 
    onerror="this.style.display='none'" 
/>

bạn có thể hiển thị hình ảnh khác nếu hình ảnh không tìm thấy như sau:

<img src="my.png" onerror="this.src = 'image-not-found.png';" />

Nguồn

2012-01-24 13:17:23

Tôi muốn đề xuất hiển thị: bị ẩn thay vì hiển thị: không có gì nếu bạn không muốn ảnh hưởng đến bố cục. Ngoài ra, lưu ý quan điểm của tôi về việc gói nó trong div nếu bạn cần có màn hình màu nền khi hình ảnh không tải. –

@NickLockwood ya thats cũng là một cách –

tôi không thể thêm bất kỳ thứ gì theo cách thủ công vào thẻ hình ảnh có nhiều thẻ xung quanh trang web. –

Đó là một hành vi phụ thuộc vào trình duyệt, nhưng bạn không thể làm bất cứ điều gì về nó. Dưới đây là một vài tùy chọn:

1) Sử dụng JavaScript để thêm trình xử lý onerror vào hình ảnh ẩn nó khi không tải được cài đặt ẩn bằng css (bạn cần có div chứa để áp dụng màu nền là màu nền sẽ không hiển thị nếu hình ảnh bị đột ngột).

Để áp dụng trình xử lý lỗi cho mọi hình ảnh trong trang web mà không cần jQuery và không sửa đổi mã, bạn có thể thực hiện việc này (đặt mã này trong tập lệnh ở cuối trang - nó sẽ không hoạt động nếu nó ở trong <head> và bạn không thể đặt nó trong window.onload hoặc nó sẽ không cháy trước khi hình ảnh được tải).

var images = document.getElementsByTagName('img'); 
for (i = 0; i < images.length; i++) { 
    images[i].onerror = function() { 
     this.style.visibility = 'hidden'; 
    } 
}

2) Đặt hình ảnh làm hình nền css trên div thay vì sử dụng thẻ <img>. Nó không phải là ngữ nghĩa, nhưng nó sẽ không hiển thị một biểu tượng hình ảnh bị hỏng nếu nó không tải được, và bạn vẫn có thể chỉ định một màu nền và một nhãn (không phải là một thẻ alt).

Nguồn

2012-01-24 13:17:33

Đó là một tính năng của một số trình duyệt - theo như tôi có thể gọi lại, Firefox, Chrome và Safari không hiển thị gì trong khi Internet Explorer hiển thị biểu tượng hình ảnh bị hỏng. Ngắn của việc sử dụng Javascript, tôi không tin rằng bạn có thể ghi đè lên hành vi này.

Nguồn

2012-01-24 13:18:09 MassivePenguin

Ít nhất trong FF, bạn có thể buộc biểu tượng bằng 'img: -moz-broken {-moz-force-broken-image-icon: 1;}' –

Trình duyệt thực hiện biểu tượng hình ảnh bị hỏng đó. Nó không phải là một cái gì đó bạn có thể thay đổi trong mã. Tôi nghĩ bạn sẽ thấy rằng các trình duyệt khác nhau xử lý hình ảnh bị thiếu khác nhau.

gì bạn muốn làm có thể bị xử lý khác nhau, mặc dù ...

Kiểu:

div.image-maybe-missing { 
    width: 300px; 
    height: 450px; 
    background-color: red; 
    background-image: url("/images/is-it-there.png"); 
}

HTML:

<div class="image-maybe-missing"> 
</div>

này sẽ cung cấp cho bạn một hộp rỗng với nền đỏ nếu hình ảnh không có. Chiều rộng và chiều cao của div cần khớp với chiều rộng và chiều cao của hình ảnh.

Nguồn

2012-01-24 13:24:37

Nhưng IE sẽ vẫn hiển thị chữ "X" màu đỏ khi hình ảnh gốc không tìm thấy. – acme

Một giải pháp đơn giản sẽ được sử dụng, theo nghĩa đen, một hình ảnh giữ chỗ trống. Điều này thường được sử dụng cho sprites nhưng tôi nghĩ rằng bạn có thể sử dụng này là tốt.

Việc bạn làm là tạo một hình ảnh gif trống 1x1 px khi bật tính minh bạch, chỉ đạo thuộc tính "src" ở vị trí trống.gif và đưa hình ảnh qua thuộc tính background-image css. Do đó, ngay cả khi không tìm thấy hình nền, hình ảnh sẽ không hiển thị hình ảnh liên kết bị hỏng.

Nguồn

2012-01-24 14:19:50 Ege

Bạn nên biết rằng mặc dù có một nhược điểm nhỏ này. Các yêu cầu thêm hình ảnh ofcourse. Bạn có thể tận dụng điều này bằng cách sử dụng sprites bất cứ khi nào có thể, do đó giảm tổng số yêu cầu hình ảnh. – Ege

Tôi sẽ tạo ra một đại diện base64 của 1px x 1px và lưu trữ nó trong JavaScript. Điều này sẽ loại bỏ yêu cầu mạng. Hình ảnh Base64 có hiệu quả kém hơn một chút nhưng ở 1px x 1px nó sẽ không thành vấn đề. Ngoài ra, nếu bạn sử dụng một sprite bạn có thể chỉ cần chọn 1 pixel mà bạn muốn sử dụng vì nó được tải xuống anyway nếu bạn đi con đường đó. Tôi đã đăng câu trả lời này dưới đây. –

Giải pháp với 1x1 png trống

 function ImgError(source){ 
      empty1x1png = "iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVQI12NgYAAAAAMAASDVlMcAAAAASUVORK5CYII="; 
      source.src = "data:image/png;base64," + empty1x1png; 
      source.onerror = ""; 
      return true; 
     } 

     <img src="someimage.png" onerror="ImgError(this);"/>

Nguồn

2013-02-11 19:08:44

Hãy thử this.remove() để loại bỏ các hình ảnh giữ chỗ bị hỏng:

<div class="cell"> 
    <p> 
    <img src="pic.png" onerror="this.remove();" /> 
    </p> 
</div>

tôi sử dụng divs tế bào để bảo vệ bố trí.

Nguồn

2017-08-10 13:50:08 MannyC

Trình giữ chỗ Hình ảnh

Trả lời

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