¿Sabes cómo ocultar el clásico «Imagen» no se encontró icono de un HTML renderizado de la página cuando un archivo de imagen no se encuentra?

Cualquier método de trabajo con JavaScript/jQuery/CSS?

  • Andy respuesta es correcta, sin embargo, usted podría querer usar un estilo.vsibility lugar. Si establece la visibilidad, el elemento todavía mantiene su espacio en el documento, por lo que ningún curioso documento de movimientos.
  • No veo el punto. Usted simplemente no supone para tratar de llegar a ningún existentes recursos a partir de su código html. El uso de javascript para ocultar el mal tratada de recursos parece ser un feo solución para mí.
  • Le falta el punto.Hay un montón de hotlinked imágenes rotas aquí en Stack Overflow, debido al hecho de que las imágenes pueden estar disponibles en el momento de la entrada, pero no está disponible en algunos meses más tarde. Estas imágenes son de forma silenciosa y suavemente escondidos.
  • rota las imágenes publicadas en las preguntas mostrar el icono de imagen rota para mí. Acabo de probarlo.
  • No es un tipo para comprobar serverside si las imágenes aún existe y la ley de la buena forma con el fin de no hacer que el cliente envíe inútil http resquests ?
  • uhm..navegador? Estoy usando FF 3.6.3 y rota las imágenes están escondidos. He probado con IE 8.0 y rota la imagen se muestran los iconos :S
  • He probado en IE y Google Chrome. Es posible Firefox oculta las imágenes en su propio si tienen un espacio en blanco alt atributo. por cierto, ¿tienes un enlace a la pregunta que se comprueba?
  • seguro .. superuser.com/questions/52671/…
  • la misma página mediante StackPrinter (soy el autor) muestra la existencia de vínculos rotos en FF 3.6.3 . Esa es la razón por la que hice esta pregunta :). stackprinter.appspot.com/…
  • No estoy seguro de por qué los dos son tratadas de manera diferente. he probado una imagen rota en Firefox y Chrome, no se ve en Firefox, pero muestra como roto en Chrome. Es claro que esto es algo que Firefox es el de decidir sobre su propio desarrollo, ya que no parece que cualquiera de los estilos que la afectan. por cierto, gran trabajo en StackPrinter.
  • Me enteré un poco más de información acerca de cómo Firefox funciona con este. Ver un actualizada el violín y la propia pseudo-clase, :-moz-broken ](developer.mozilla.org/en/CSS/:-moz-broken). Yo estaba pensando a mí mismo antes que un pseudo clase sería útil para los estilos de imágenes rotas.
  • gracias por los consejos y por el +1 por allí :).
  • no hay ningún problema 🙂

8 Comentarios

  1. 97

    Puede utilizar el onerror evento en JavaScript para actuar cuando una imagen no se carga:

    var img = document.getElementById("myImg");
    img.onerror = function () { 
        this.style.display = "none";
    }

    En jQuery (ya que se le pide):

    $("#myImg").error(function () { 
        $(this).hide(); 
    });

    O para todas las imágenes:

    $("img").error(function () { 
        $(this).hide();
        //or $(this).css({visibility:"hidden"}); 
    });

    Debe utilizar visibility: hidden en lugar de .hide() si ocultar las imágenes podrían cambiar el diseño. Muchos sitios en la web, utiliza un valor predeterminado «imagen» de la imagen en lugar de ello, señalando la src atributo a la imagen cuando la imagen especificada la ubicación no está disponible.

    • es que crossbrowser?
    • andy – lo que sería el ‘global’ de la solución a aplicar a TODAS las imágenes?? estoy pensando que sería bastante fácil si todos estaban en el mismo div – pregunto acerca de TODAS las imágenes en el documento…
    • Estaba bastante seguro de que lo es, pero tu comentario me hizo doble-check. Una rápida en Google regresó este w3schools página (lo siento David, si estás leyendo esto), indicando cruz de compatibilidad con navegadores.
    • Si estás usando jQuery, se puede aplicar el evento para todas las imágenes. sólo utilice el selector de etiquetas, por ejemplo,$("img").error(function () { /*...*/ });.
    • E: suena bien, +1. siguiente pregunta interesante sería, es «error» boundable con live() o delegate().
    • StackOverflow motor parece tener un enfoque diferente, he buscado la solución en maestro de js, pero no he encontrado ninguna .error en absoluto. ¿Sabe usted cómo lo manejan?
    • gracias andy – doh 🙂
    • Unfortuantly, no es posible la live enlazar la error evento.
    • Estoy bastante seguro de que usted sólo puede usar live() y delegate() para eventos personalizados, eventos de esa burbuja y eventos que no burbuja, pero tienen un burbujeo alternativa. Compruebe [ Advertencias ](api.jquery.com/live/#caveats) sección de la documentación.
    • visibility sería mejor, ya que display puede romper el diseño.
    • No estoy seguro de que no hay ninguna otra manera de manejarlo. Hay posiblemente algún truco que no soy consciente. Si quieres saber cómo es algo que se implementa en el Desbordamiento de la Pila podría intentar pedir más en meta.stackoverflow.com.
    • depende del uso, pero visibility sería más útil. Muchos sitios en la web, ni, en lugar de intercambio de la imagen por defecto, «sin imagen» de la imagen.
    • Si usted está usando ajax en cualquier lugar que usted va a querer agregar esto a tu pequeño hack. $.ajaxSetup({complete: function() { $("img").error(function () { $(this).css({visibility:"hidden"}); });} });

  2. 111
    <img onerror='this.style.display = "none"'>
    • Desgraciadamente no puedo usar esta solución debido a que el contenido html que se descarga desde un sitio web de terceros a través de Json y no puedo editarlo. Gracias de todos modos.
    • Impresionante, justo lo que necesitaba. Simple y unobstructive, que se enmarca en una plantilla!
    • cosa de la belleza !!!!!! gracias @gary
    • Esto debe ser aceptado respuesta.
    • Aunque es bastante viejo ya, esto es genial! Es allí una manera de ocultar el <a> etiquetas que rodea a mi ahora ocultas de la imagen así?
  3. 4

    Haciendo una búsqueda rápida en Andy E‘s respuesta, no es posible la live() enlazar error.

    //won't work (chrome 5)
    $('img').live('error', function(){
         $(this).css('visibility', 'hidden');
    });

    Así que tienes que ir como

    $('<img/>', {
      src:    'http://www.notarget.com/fake.jpg',
      error:  function(e){
        $(this).css('visibility', 'hidden');
      }
    }).appendTo(document.body);

    directamente la unión de la error event handler en la creación de un nuevo elemento.

    • +1, la razón de esto es que el onerror de eventos DOM no de la burbuja. live y delegado el trabajo colocando el controlador de eventos más arriba en la jerarquía del árbol DOM y capturar el evento como burbujas. Por supuesto, el jQuery desarrolladores han trabajado en torno a este para algunos eventos, como de enfoque y desenfoque
    • E: Yay, ya workedaround que, no puede ser la peor de las ideas para hacer una cosa similar para error. Suena como un nice to have para mí.
  4. 4

    Puede ser poco tarde para responder, pero aquí está mi intento.
    Cuando me enfrenté a la misma cuestión que se fija mediante el uso de un div de el tamaño de la imagen & ajuste de imagen de fondo a este div. Si la imagen no se encuentra, el div son transparentes, por lo que su todo se hace en silencio, sin java-script de código.

  5. 4

    Para ocultar todas las imágenes de error, sólo tiene que añadir el código JavaScript en la parte inferior de la página (justo antes del cierre de la etiqueta body):

    (function() {
        var allimgs = document.images;
        for (var i = 0; i < allimgs.length; i++) {
            allimgs[i].onerror = function() {
                this.style.visibility = "hidden"; //Other elements aren't affected. 
            }
        }
    })();
    • Este es mi método preferido, ya que prácticamente se asegura de que el onerror los eventos están enlazados antes de que las imágenes tienen produjo un error y usted no tiene que agregar onerror atributos de cada etiqueta de imagen. Asegúrese de poner este código después de que todos sus etiquetas de imagen, pero antes de cualquier otra javascript que en <body>, de lo contrario un bloqueo de JS externo de carga pueden provocar la ejecución después de que una imagen de error.
    • Esto funciona para mí, junto con el asesoramiento de gálatas, la necesidad de tener JS ejecutar antes de que cualquier cosa que podría retrasar.
  6. 4

    He modificado ligeramente la solución sugerida por Gary Willoughby, porque muestra brevemente la imagen rota. Mi solución:

        <img src="..." style="display: none" onload="this.style.display=''">

    En mi de la solución de la imagen está oculta inicialmente y sólo se muestra cuando se ha cargado correctamente. Tiene la desventaja: los usuarios no podrán ver halfloaded imágenes. Y si el usuario ha desactivado el JS, a continuación, él nunca va a ver alguna de las imágenes

    • …y los usuarios no podrán ver nada, si javascript está deshabilitado!
    • Así, si el usuario tiene javascript deshabilitado, más útiles aplicaciones web no funciona de todos modos…
    • <img src="..." onerror="this.style.display = 'none'"/> podría funcionar mejor para el medio cargado y no-js navegador casos?
  7. 3

    he encontrado un ingenioso método para hacer exactamente esto, mientras que siguen siendo funcionales cuando se utiliza ng-src directiva en Angular.js y como…

    <img
      ng-src="{{myCtrl.myImageUrlThatWillDynamicallyChange}}" 
      onerror="this.src='data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=='"
      />

    es básicamente un menor GIF transparentes (como se ve
    http://proger.i-forge.net/%D0%9A%D0%BE%D0%BC%D0%BF%D1%8C%D1%8E%D1%82%D0%B5%D1%80/%5B20121112%5D%20The%20smallest%20transparent%20pixel.html )

    de curso este gif podría mantenerse dentro de una variable global para no estropear las plantillas.

    <script>
      window.fallbackGif = "..."
    </script>

    y uso

    <img
      ng-src="{{myCtrl.myImageUrlThatWillDynamicallyChange}}" 
      onerror="this.src=fallbackGif"
      />

    etc.

  8. 0

    Sólo el Uso de css simple

    .AdminImageHolder {
    display: inline-block;
    min-width: 100px;
    max-width: 100px;
    min-height: 100px;
    max-height: 100px;
    background: url(img/100x100.png) no-repeat;
    border: 1px solid #ccc;
    }

Dejar respuesta

Please enter your comment!
Please enter your name here