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.ocultar etiqueta alt en firefox
¿Es posible ocultar los atributos alt en Firefox?
Nota:alt atributos contienen nombres dinámicos en mi caso.
la forma de prevenir alt valores de atributo se muestre 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 sea invisible (con las advertencias CSS usuales) en Firefox configurando, p.
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 no se haya configurado para mostrar imágenes.
¿Podría colocar los nombres dinámicos en el atributo title? Puede 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; } haría?
He puesto nombres dinámicos en alt tag a s bien como título. También traté de colocar el color: blanco como estilo en línea para las imágenes, pero no funcionó. Estoy usando el plugin wp-types de wordpress y después de aplicar el estilo en línea, ni una sola imagen renderizada. – neeraj
Si no te importa la adición de un poco más, aquí está:
<img src = "283414_2114217089554_728204_nn.jpg" onload="this.setAttribute('alt','this is the alt of my image');" />
Esperamos que ayuda ... :))
Necesito ocultar las etiquetas alt existentes, no reemplazándola con otra cosa que usted describió en su ejemplo. – neeraj
En lugar de preocuparse acerca de la función alt, le puede dar todas sus imágenes son una clase común, digamos image-to-show y cree un div de carga absolutamente posicionado sobre esta imagen. Por lo tanto, cuando se carga la página, se muestran sólo el div de carga, con un gif de carga, algo como esto:
// show loading image
$('.loader').show();
Una vez cargada 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 identificadores de imagen específicos. Otra forma más clara de hacerlo sería establecer data-loading en true para las imágenes que se están cargando y una vez que se cargan las imágenes, configure $('.image-to-show').data('loading', false)
Existen varias formas de abordar esto, hágamelo saber si necesita más aclaraciones.
Lamentablemente no puedo hacer esto porque las imágenes están siendo renderizadas por un plugin (Wordpress). Así que no puedo hacer ningún cambio en los archivos centrales del complemento. Estoy buscando una solución solo para ocultar la etiqueta alt. – neeraj
Bueno, la mejor parte de trabajar con un CMS como Wordpress es que tienes la flexibilidad de modificar el código de la manera que quieres que funcione. De todos modos, el complemento crearía un margen de beneficio para sus imágenes. Obtenga el ID o la clase de las imágenes como su selector, obtenga el atributo 'alt' en una variable, límpielo y en la carga de la imagen, vuelva a escribirlo en el DOM. Feo, pero funcional: D – rizwaniqbal
me gustaría empezar añadiendo este CSS, que ocultará todas las imágenes con texto alternativo (no display: none porque queremos deshacer esto y no vamos a saber qué deshacer a):
img[alt] {
width: 0;
height: 0;
}
Y a continuación, que muestra que una vez que todo está cargado (este utiliza jQuery):
$(document).ready(function() {
$('img[alt]').on('load', function() {
this.style.width = 'auto';
this.style.height = 'auto';
});
});
Después de probar todos los otros métodos aquí, me encontré con este método funciona mejor que hace que el texto transparente que se cargue la imagen:
.yourClass img {
color: transparent;
}
Además de establecer que:
img {
background: white;
color: white;
}
me gusta para desactivar también el comportamiento de imagen predeterminado de Firefox:
img:-moz-loading {
visibility: hidden;
}
¡Muchas gracias! Esto ha resuelto mi problema. – neeraj