Почему атрибут alt отображается на долю секунды в Firefox?

Question

Я работаю с Course Management System Moodle и в админке дерево папок (которое использует значки папок) примерно на секунду отображает заданный атрибут alt (в данном случае «Open Folder»), затем оно скрывает и показывает изображение когда изображение готово.

Система работает медленно, поэтому я предполагаю, что Firefox сначала думает, что изображения не существуют.

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

Есть ли способ скрыть этот тег, не удаляя теги alt? (что будет трудоемким), возможно, с использованием JQUERY или CSS.

Answer 1

в течение примерно секунды отображает заданный атрибут alt (в данном случае «Открыть папку»), затем скрывает и показывает изображение, когда изображение готово.

Да, для этого и используется альтернативный текст: он предоставляет текстовую альтернативу для случая, когда изображение недоступно - будь то из-за ошибки, или изображения отключены в настройках браузера, или, в данном случае, файл просто еще не прибыл.

Альт-текст действительно то, что вы хотите? Если изображение не содержит слов «Открыть папку», вышеприведенный текст не подходит. Если мы говорим об одном из этих маленьких значков плюс / минус, который открывает дерево, лучшим альтернативным текстом будет «+». «Открыть папку», как описание того, что изображение делает (в отличие от того, что оно содержит ), лучше применять к атрибуту title, используемому для всплывающих подсказок.

Обратите внимание, что если вы используете режим Quirks Mode и для изображения задан фиксированный размер, Firefox будет использовать значок «разбитое изображение» с альт-текстом, наложенным и обрезанным внутри, вместо простого альт-текста самостоятельно. Это соответствует старому поведению IE. Но на самом деле вы не хотите использовать режим Quirks, и в обычном случае, когда фиксированный размер мал, обрезка делает альтернативный текст нечитаемым и бесполезным.

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

Я бы порекомендовал: преодолеть это. Вот как вращается веб, любая страница может немного двигаться, поскольку она рендерится постепенно. Для изображений вы можете увидеть это только один раз, тогда изображение будет кэшировано и сразу же появится. Если это не так, значит что-то не так с настройкой кэширования.

В зависимости от того, о каком макете вы говорите, вы можете исправить это, чтобы оно также не реагировало на изменение размера изображения. Например, при использовании таблицы установка «table-layout: fixed» в таблице и «width: (некоторое количество) px» в ячейке изображения верхней строки заставит ее придерживаться этой ширины, даже если текст внутри будет меньше. Впрочем, возможно, из-за этого текст alt переместится в следующую ячейку.

Answer 2

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

Answer 3

Если изображения являются частью макета, я бы порекомендовал переместить их в CSS. Вам также следует оптимизировать ваши изображения, где это возможно, независимо от того, являются ли они CSS или иным образом. Вы также можете переместить файлы JavaScript вниз страницы, где это возможно, поскольку они блокируют параллельные загрузки . В общем, применение многих методов здесь , вероятно, поможет.