скрыть тег alt в firefox

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

можно ли скрыть alt атрибуты в Firefox?

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

7
alt attributes firefox hide html

8 ответов

С alt значения атрибутов из отображаемого - удалить атрибут.

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

можно сделать alt текст невидимым (с обычные CSS предостережения) в Firefox, установив, например, 
img { background: white; color: white; }

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

13

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

.yourClass img {
    color: transparent;
}
16

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

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

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

1

Не могли бы вы поместить динамические имена в заголовок? Вы можете попробовать черный фон или черное фоновое изображение; возможно, Firefox все еще использует черный цвет текста. Может быть!--0--> будет делать?

0

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

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

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

0

вместо того, чтобы беспокоиться о функции 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)

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

0

Я бы начал с добавления этого 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';
    });
});
0

в дополнение к установке в:

img { 
  background: white; 
  color: white;
}

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

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