Скрыть тэг alt в firefox

Question

Согласно поведению по умолчанию, alt Атрибут отображается в первый раз перед отображением изображения. Я отображаю 25 изображений в сетке, так что это выглядит немного неловко, как и все alt атрибуты отображаются первыми.

Можно ли спрятать alt атрибуты в Firefox?

Замечания: alt атрибуты содержат динамические имена в моем случае.

Answer 1

Способ предотвратить alt Значения атрибута для отображения должны удалить атрибут.

Значение alt Атрибут (не тег) заключается в том, что он указывает альтернативу, заменяющую изображение, в ситуациях, когда изображение не отображается. Поэтому, если вы хотите скрыть его, когда изображение еще не загружено, вы запрашиваете поведение, которое противоречит самому значению атрибута.

Однако вы можете сделать alt текст невидимый (с обычными CSS-предупреждениями) в Firefox, установив, например,

img { background: white; color: white; }

в CSS. Это подразумевает, что alt тексты невидимы также в том случае, если браузер никогда не получает изображение, или браузер настроен на отображение изображений.

Answer 2

Попробовав все остальные методы здесь, я обнаружил, что этот метод работает лучше всего, что делает текст прозрачным до загрузки изображения:

.yourClass img {
    color: transparent;
}

Answer 3

Из ссылки на все приведенные выше ответы я понял, что лучше всего использовать

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

Предположим, что изображения нет, и мы используем цвет как белый или прозрачный, тогда атрибут alt больше не используется, поэтому нам нужен этот атрибут, если нет изображения, чтобы показать, какое изображение здесь загрузить, и показать альтернативный текст для отображения.

Answer 4

Старый вопрос, но с 2020 года img:-moz-loading {visibility: hidden;} больше не работает.

Вместо того, чтобы делать img {background: white; color: white;}, Я думаю, что имеет смысл сделать это:

img {
   color: transparent;
}

Таким образом, это не испортит изображения, которые должны иметь некоторую прозрачность. Кроме того, это не влияет на более редкие случаи, когда вам нужно установить цвет фона для img.

Для получения бонусных баллов вы можете сделать это:

<img src="src.com/src" onerror="this.style.color='black'"/>

Это вернет его к обычному альтернативному цвету в случае, если браузер не сможет получить изображение.

Конечно, это утомительно добавлять к каждому изображению, но проще, если вы используете JS-фреймворк с глобальным <Image/> составная часть.

Answer 5

В дополнение к настройке:

img { 
  background: white; 
  color: white;
}

Мне также нравится отключать поведение изображений Firefox по умолчанию:

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

Answer 6

Вместо того, чтобы беспокоиться о функции alt, вы можете дать всем вашим изображениям общий класс, скажем 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();
});

Вы можете дополнительно улучшить этот код, используя специальные идентификаторы изображений. Другой, более чистый способ сделать это - установить data-loading Значение true для изображений, которые загружаются, и после загрузки изображений установите $('.image-to-show').data('loading', false)

Есть несколько способов решения этой проблемы, дайте мне знать, если вам нужны дополнительные разъяснения.

Answer 7

Не могли бы вы поместить динамические имена в атрибут заголовка? Вы можете попробовать черный фон или черное фоновое изображение; возможно Firefox все еще использует черный текстовый цвет. Может быть img { color: white; } сделал бы?

Answer 8

Если вы не против добавить немного больше, вот оно:

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

Надеюсь, это поможет...:))

Answer 9

Я бы начал с добавления этого CSS, который будет скрывать все изображения с альтернативным текстом (не 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';
    });
});