notas - mostrar imagen en html

ocultar la etiqueta alt en firefox

Question

Según el comportamiento predeterminado, el atributo alt se representa por primera vez justo antes de la representación de la imagen. Estoy mostrando 25 imágenes en una cuadrícula por lo que parece un poco incómodo, ya que todos los atributos alt se muestran primero.

¿Es posible ocultar atributos alt en Firefox?

Nota: los atributos alt contienen nombres dinámicos en mi caso.

Answer 1

¿Podría colocar los nombres dinámicos en el atributo de título ? Podrías probar con un fondo negro o una imagen de fondo negra; tal vez Firefox todavía usa un color de texto negro. Tal vez img { color: white; } img { color: white; } haría?

Answer 2

Además de establecer a:

img { 
  background: white; 
  color: white;
}

Me gusta desactivar el comportamiento de imagen predeterminado de Firefox también:

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

Answer 3

Comenzaré agregando este CSS, que ocultará todas las imágenes con texto alternativo (no se display: none porque queremos deshacer esto y no sabremos a qué deshacer):

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

Y luego mostrándolo una vez que todo está cargado (esto usa jQuery):

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

Answer 4

Después de probar todos los otros métodos aquí, encontré que este método funciona mejor, lo que hace que el texto sea transparente hasta que se cargue la imagen:

.yourClass img {
    color: transparent;
}

Answer 5

En lugar de preocuparse por la función alt, puede dar a todas sus imágenes una clase común, decir image-to-show y crear un div de carga absolutamente posicionado sobre esta imagen. Por lo tanto, cuando se carga la página, solo muestra el div de carga, con un gif de carga, algo como esto:

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

Una vez que se carga la imagen, puede ocultar el div y mostrar la imagen.

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

Puede mejorar aún más este código utilizando ID de imágenes específicas. Otra manera más limpia de hacerlo sería establecer data-loading en verdadero para las imágenes que se están cargando y una vez que se carguen las imágenes, configure $(''.image-to-show'').data(''loading'', false)

Existen múltiples formas de abordar esto, avíseme si necesita más aclaraciones.

Answer 6

La forma de evitar que se muestren los valores de atributo alt es eliminar el atributo.

El significado de un atributo alt (no etiqueta) es que especifica una alternativa, un sustituto de la imagen, en situaciones donde la imagen no se muestra. Entonces, si desea ocultarlo cuando la imagen aún no se ha cargado, está pidiendo un comportamiento que contradiga el significado del atributo.

Sin embargo, puede hacer que el texto alt invisible (con las advertencias CSS usuales) en Firefox estableciendo, por ejemplo,

img { background: white; color: white; }

en CSS. Esto implica que los textos alt son invisibles también en caso de que el navegador nunca obtenga la imagen, o el navegador haya sido configurado para no mostrar imágenes.

Answer 7

Si no te importa agregar un poco más, aquí está:

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

Espero que ayude... :))