ẩn thẻ alt trong firefox

Question

Theo hành vi mặc định, thuộc tính alt được hiển thị lần đầu tiên ngay trước khi hiển thị hình ảnh. Tôi đang hiển thị 25 hình ảnh trong lưới nên có vẻ hơi khó xử vì tất cả các thuộc tính alt được hiển thị trước tiên.

Có thể ẩn thuộc tính alt trong Firefox không?

Lưu ý:alt thuộc tính chứa tên động trong trường hợp của tôi.

Answer 1

cách để ngăn chặn alt giá trị thuộc tính từ được hiển thị là để loại bỏ các thuộc tính.

Ý nghĩa của thuộc tính alt (không phải thẻ) là nó chỉ định phương án thay thế, hình ảnh thay thế cho hình ảnh, trong trường hợp hình ảnh không được hiển thị. Vì vậy, nếu bạn muốn ẩn nó khi hình ảnh chưa được tải, bạn đang yêu cầu hành vi mâu thuẫn với ý nghĩa của thuộc tính.

Tuy nhiên, bạn có thể làm cho văn bản alt ẩn (với CSS Caveats thông thường) trên Firefox bằng cách đặt ví dụ:

img { background: white; color: white; } 

trong CSS.Điều này ngụ ý rằng các văn bản alt cũng vô hình trong trường hợp trình duyệt không bao giờ nhận được hình ảnh hoặc trình duyệt đã được định cấu hình không hiển thị hình ảnh.

Answer 2

Bạn có thể đặt tên động trong thuộc tính tiêu đề không? Bạn có thể thử một nền đen hoặc hình nền đen; có thể Firefox vẫn sử dụng màu văn bản màu đen. Có thể img { color: white; } sẽ làm gì?

Answer 3

Nếu bạn không nhớ thêm một chút thêm, ở đây nó là:

<img src = "283414_2114217089554_728204_nn.jpg" onload="this.setAttribute('alt','this is the alt of my image');" /> 

Hy vọng rằng sẽ giúp ... :))

Answer 4

Thay vì lo lắng về alt chức năng, bạn có thể cho tất cả hình ảnh của bạn là một lớp phổ biến, giả sử image-to-show và tạo div tải hoàn toàn được định vị trên hình ảnh này. Vì vậy, khi tải trang, bạn chỉ hiển thị div tải, với gif tải, như sau:

// show loading image 
$('.loader').show(); 

Khi hình ảnh được tải, bạn có thể ẩn div và hiển thị hình ảnh.

// main image loaded ? 
$('.image-to-show').load(function(){ 
    // hide/remove the loading image 
    $('.loader').hide(); 
}); 

Bạn có thể tăng cường mã này bằng cách sử dụng ID hình ảnh cụ thể. Một cách khác để làm điều đó là đặt data-loading thành true cho hình ảnh đang tải và khi hình ảnh được tải, hãy đặt $('.image-to-show').data('loading', false)

Có nhiều cách giải quyết vấn đề này, cho tôi biết nếu bạn cần làm rõ thêm.

Answer 5

Tôi muốn bắt đầu bằng cách thêm CSS này, mà sẽ ẩn tất cả các hình ảnh với alt văn bản (không display: none bởi vì chúng tôi muốn hoàn tác này và chúng tôi sẽ không biết phải lùi lại đến):

img[alt] { 
    width: 0; 
    height: 0; 
} 

Và sau đó cho thấy nó khi nó đã được tất cả nạp (này sử dụng jQuery):

$(document).ready(function() { 
    $('img[alt]').on('load', function() { 
     this.style.width = 'auto'; 
     this.style.height = 'auto'; 
    }); 
}); 

Answer 6

Sau khi thử tất cả các phương pháp khác ở đây, tôi thấy phương pháp này có hiệu quả nhất mà làm cho văn bản trong suốt cho đến khi tải hình ảnh:

.yourClass img { 
    color: transparent; 
} 

Answer 7

Ngoài thiết để:

img { 
    background: white; 
    color: white; 
} 

tôi thích để tắt hoạt động của hình ảnh mặc định của Firefox:

img:-moz-loading { 
    visibility: hidden; 
}