在Firefox中隱藏ALT標記

根據默認行爲，alt屬性首次在圖像呈現之前呈現。我在網格中顯示25張圖像，因此看起來有點尷尬，因爲首先顯示所有alt屬性。在Firefox中隱藏ALT標記

是否可以在Firefox中隱藏alt屬性？

注意：alt屬性包含動態名稱在我的情況。

2012-10-01 neeraj

以防止顯示alt屬性值的方法是去除屬性。

alt屬性（而非標記）的含義是指定在圖像未顯示的情況下替代圖像。所以如果你想在圖像尚未加載的時候隱藏它，你就會要求與屬性的含義相矛盾的行爲。

然而，您可以通過設置例如Firefox瀏覽器來使Firefox的alt文字不可見（使用常見的CSS警告）。

img { background: white; color: white; }

in CSS。這意味着alt文本在瀏覽器從未獲取圖像或瀏覽器已配置爲不顯示圖像的情況下也是不可見的。

來源

2012-10-01 06:27:43

非常感謝！這已經解決了我的問題。 – neeraj

您可以將動態名稱放在標題屬性中嗎？您可以嘗試黑色背景或黑色背景圖像;也許Firefox仍然使用黑色文字顏色。也許img { color: white; }會做？

來源

2012-10-01 05:37:20

我已經在alt標籤中放置了動態名稱a和標題一樣。我也嘗試將顏色：白色作爲圖像的內聯樣式，但它不起作用。我使用wordpress wp-types插件，並在應用內聯樣式後，甚至沒有渲染單個圖像。 – neeraj

如果你不介意加入一些額外的，那就是：

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

希望幫助... :)）

來源

2012-10-01 05:51:28

我需要隱藏現有的alt標記，而不是用您在示例中描述的其他東西替換它。 – neeraj

而不是擔心中高音功能，你可以給你所有的圖像都是一個普通的類，比如說image-to-show，並且創建一個絕對定位在這個圖像上的加載div。所以，當頁面加載，你只顯示加載的div的加載GIF，像這樣：

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

一旦加載圖像，你可以隱藏div和顯示圖像。

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

您可以通過使用特定的圖像ID進一步增強此代碼。另一種更簡潔的方法是將data-loading設置爲true，以便加載圖像並加載圖像後，設置爲$('.image-to-show').data('loading', false)

有多種方法可以解決此問題，請告知我是否需要進一步說明。

來源

2012-10-01 05:53:20 rizwaniqbal

不幸的是，我不能這樣做，因爲圖像是由插件（Wordpress）呈現。所以我不能在插件的核心文件中做任何改變。我正在尋找一個解決方案來隱藏alt標籤。 – neeraj

那麼，使用像WordPress這樣的CMS最棒的地方在於，您可以靈活地按照您希望的方式修改代碼。無論如何，插件會爲你的圖片創建一些標記。獲取圖像的ID或類作爲選擇器，在變量中獲取'alt'屬性，將其擦除乾淨，並在圖像加載時將其寫回到DOM中。醜，但功能：D – rizwaniqbal

我想加入這個CSS，這將隱藏與ALT文字的所有圖像開始（不display: none因爲我們想撤消此，我們將不知道該怎麼撤消）：

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

而且然後顯示它，一旦它的所有裝載（這用了jQuery）：

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

來源

2012-10-01 06:19:30

這裏嘗試所有其他方法後，我發現這種方法效果最佳，這使得文本透明的圖像加載到：

.yourClass img { 
    color: transparent; 
}

來源

2014-01-21 23:04:05

除了設置爲：

img { 
    background: white; 
    color: white; 
}

我喜歡以禁用Firefox的默認圖像行爲以及：

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

來源

2015-01-21 05:36:32

在Firefox中隱藏ALT標記

回答

相關問題