Compruebe si se carga una imagen (sin errores) con jQuery
https://stackoverflow.com/questions/1977871
-
21-09-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianPregunta
Estoy usando JavaScript con la librería jQuery para manipular las miniaturas de imágenes contenidas en una lista desordenada. Cuando se carga la imagen se hace una cosa, cuando se produce un error que hace algo más. Estoy usando jQuery load() y métodos error() como eventos. Después de estos acontecimientos verifico el elemento de imagen DOM para el integro para asegurarse de que la imagen no se ha cargado antes de jQuery podría registrar los eventos.
Funciona correctamente excepto cuando se produce un error antes de jQuery puede registrar los eventos. La única solución que se me ocurre es utilizar el atributo img onerror para almacenar una "bandera" en algún lugar en todo el mundo (o en el nodo es uno mismo) que dice que falló tan jQuery puede comprobar que "tienda / nodo" en la comprobación integro.
Alguien tiene una solución mejor?
Editar: en negrita los puntos principales y detalles adicionales añadido a continuación: Estoy comprobando si una imagen es completa (alias cargado) después agrego un evento de carga y el error en la imagen. De esa manera, si la imagen se cargó antes se registraron los acontecimientos, todavía voy a saber. Si la imagen no se carga después de los acontecimientos a continuación, los eventos se hará cargo de él cuando lo hace. El problema con esto es que se puede comprobar fácilmente si una imagen se ha cargado ya, pero No se puede saber si se produjo un error en su lugar.
Solución
Otra opción es poner en funcionamiento el onload y / o eventos onerror mediante la creación de un elemento de imagen en la memoria y el establecimiento de su atributo src al atributo src original de la imagen original. He aquí un ejemplo de lo que quiero decir:
$("<img/>")
.on('load', function() { console.log("image loaded correctly"); })
.on('error', function() { console.log("error loading image"); })
.attr("src", $(originalImage).attr("src"))
;
Espero que esto ayude!
Otros consejos
Comprobar las propiedades complete y naturalWidth, en ese orden.
https://stereochro.me/ideas/detecting-broken-images-js
function IsImageOk(img) {
// During the onload event, IE correctly identifies any images that
// weren’t downloaded as not complete. Others should too. Gecko-based
// browsers act like NS4 in that they report this incorrectly.
if (!img.complete) {
return false;
}
// However, they do have two very useful properties: naturalWidth and
// naturalHeight. These give the true size of the image. If it failed
// to load, either of these should be zero.
if (img.naturalWidth === 0) {
return false;
}
// No other way of checking: assume it’s ok.
return true;
}
De acuerdo con mi comprensión de la especificación W3C HTML para el elemento img , usted debería ser capaz de hacer esto utilizando una combinación de la complete y naturalHeight atributos, al igual que :
function imgLoaded(imgElement) {
return imgElement.complete && imgElement.naturalHeight !== 0;
}
A partir de la especificación para el href="https://www.w3.org/TR/html5/embedded-content-0.html#dom-img-complete"> El atributo IDL completa debe devolver verdadero si cualquiera de los siguientes
condiciones es verdadera: De lo contrario, el atributo debe devolver false. Así que, esencialmente, El IDL atributos Una img es siempre en uno de los siguientes estados: Cuando un elemento img es ya sea en el estado parcialmente disponible o en
el estado completamente disponible, se dice que esté disponible. Así que si la imagen se "rompe" (Error al cargar), entonces será en el estado roto, no el estado disponible, por lo Por lo tanto, la comprobación Se puede leer más sobre esto en el W3C HTML Especificación para la complete atributo
complete devuelve verdadero si la imagen tiene ya sea terminado de cargar, o cuando no haya carga. Dado que queremos sólo el caso en el que la imagen se ha cargado correctamente tenemos que comprobar la nauturalHeight atributo así:
naturalWidth y debe devolver el naturalHeight
anchura intrínseca y la altura de la imagen, en píxeles CSS, si la imagen
está disponible, o de lo contrario 0. available se define así:
naturalHeight será 0. imgElement.complete && imgElement.naturalHeight !== 0 debe decirnos si la imagen se ha cargado correctamente. img elemento , o en MDN .
He intentado muchas formas diferentes y de esta manera es el único que trabajó para mí
//check all images on the page
$('img').each(function(){
var img = new Image();
img.onload = function() {
console.log($(this).attr('src') + ' - done!');
}
img.src = $(this).attr('src');
});
También puede agregar una función de devolución de llamada activado una vez que todas las imágenes se cargan en el DOM y listo. Esto se aplica a las imágenes agregadas dinámicamente también. http://jsfiddle.net/kalmarsh80/nrAPk/
imagesLoaded librería javascript .
Se puede utilizar con sencillo Javascript y como un plugin de jQuery.
Características:
- oficialmente soportado por IE8 +
- licencia: MIT
- dependencias: ninguno
- peso (minified y gzip): (luz) 7kb minified
Recursos
- Proyecto en github: https://github.com/desandro/imagesloaded
- Web oficial: http://imagesloaded.desandro.com/
- https://stackoverflow.com/questions/26927575 / ¿Por qué usar-imagesloaded-javascript-biblioteca-contra-jquerys-ventana de carga
- imagesloaded librería javascript: ¿cuál es el soporte de navegador y dispositivo ?
Recuperar información de elementos de imagen en la página
de trabajo de prueba en Chrome y Firefox
Trabajando jsFiddle (abrir la consola para ver el resultado)
$('img').each(function(){ // selecting all image element on the page
var img = new Image($(this)); // creating image element
img.onload = function() { // trigger if the image was loaded
console.log($(this).attr('src') + ' - done!');
}
img.onerror = function() { // trigger if the image wasn't loaded
console.log($(this).attr('src') + ' - error!');
}
img.onAbort = function() { // trigger if the image load was abort
console.log($(this).attr('src') + ' - abort!');
}
img.src = $(this).attr('src'); // pass src to image object
// log image attributes
console.log(img.src);
console.log(img.width);
console.log(img.height);
console.log(img.complete);
});
Nota: He utilizado jQuery , pensé que esto puede ser acheive en el pleno javascript
Me parece una buena información aquí OpenClassroom -> este es un foro francés
Realtime red de detectores - estado de la red cheque sin actualizar la página: (No es jQuery, pero probado, y funciona al 100%: (probado en Firefox v25.0))
Código:
<script>
function ImgLoad(myobj){
var randomNum = Math.round(Math.random() * 10000);
var oImg=new Image;
oImg.src="YOUR_IMAGELINK"+"?rand="+randomNum;
oImg.onload=function(){alert('Image succesfully loaded!')}
oImg.onerror=function(){alert('No network connection or image is not available.')}
}
window.onload=ImgLoad();
</script>
<button id="reloadbtn" onclick="ImgLoad();">Again!</button>
Si se perdió la conexión sólo tiene que pulsar el botón de nuevo.
Actualización 1: Detección automática sin actualizar la página:
<script>
function ImgLoad(myobj){
var randomNum = Math.round(Math.random() * 10000);
var oImg=new Image;
oImg.src="YOUR_IMAGELINK"+"?rand="+randomNum;
oImg.onload=function(){networkstatus_div.innerHTML="";}
oImg.onerror=function(){networkstatus_div.innerHTML="Service is not available. Please check your Internet connection!";}
}
networkchecker = window.setInterval(function(){window.onload=ImgLoad()},1000);
</script>
<div id="networkstatus_div"></div>
Esta es la forma en que tengo que trabajar con navegadores utilizando una combinación de los métodos anteriores (también necesitaba para insertar imágenes de forma dinámica en el DOM):
$('#domTarget').html('<img src="" />');
var url = '/some/image/path.png';
$('#domTarget img').load(function(){}).attr('src', url).error(function() {
if ( isIE ) {
var thisImg = this;
setTimeout(function() {
if ( ! thisImg.complete ) {
$(thisImg).attr('src', '/web/css/img/picture-broken-url.png');
}
},250);
} else {
$(this).attr('src', '/web/css/img/picture-broken-url.png');
}
});
Nota:. Usted tendrá que proporcionar un estado booleano válido para la variable Isie
Después de leer las soluciones interesantes en esta página, he creado una solución fácil de usar, altamente influenciado por SLaks' y después de NOYO que parece estar trabajando en versiones bastante recientes (como la escritura) de Chrome, IE, Firefox, Safari y Opera (todo en Windows). Asimismo, se trabajó en un iPhone / iPad emulador que utiliza.
Una diferencia importante entre esta solución y SLaks y post de Noyo es que esta solución comprueba principalmente las propiedades naturalWidth y naturalHeight. He encontrado que en las versiones actuales del navegador, esas dos propiedades parecen proporcionar los resultados de la mayoría de los votos y consistentes.
Este código devuelve TRUE cuando una imagen se ha cargado completamente y con éxito. Se devuelve FALSE cuando una imagen, o bien no se ha cargado completamente todavía o ha fallado a la carga.
Una cosa que usted necesita para tener en cuenta es que esta función también devolverá FALSE si la imagen es una imagen de 0x0 píxeles. Pero esas imágenes son bastante infrecuentes, y no puedo pensar en un caso muy útil cuando usted quiere comprobar para ver si una imagen de 0x0 píxeles se ha cargado todavía:)
En primer lugar, fijar una nueva función llamada "isLoaded" al prototipo HTMLImageElement, por lo que la función se puede utilizar en cualquier elemento de la imagen.
HTMLImageElement.prototype.isLoaded = function() {
// See if "naturalWidth" and "naturalHeight" properties are available.
if (typeof this.naturalWidth == 'number' && typeof this.naturalHeight == 'number')
return !(this.naturalWidth == 0 && this.naturalHeight == 0);
// See if "complete" property is available.
else if (typeof this.complete == 'boolean')
return this.complete;
// Fallback behavior: return TRUE.
else
return true;
};
A continuación, cada vez que necesita para comprobar el estado de carga de la imagen, sólo llamamos a la función "IsLoaded".
if (someImgElement.isLoaded()) {
// YAY! The image loaded
}
else {
// Image has not loaded yet
}
Por el comentario de Giorgian en SLaks' y el post de NOYO, esta solución, probablemente, sólo se puede utilizar como una verificación de una sola vez en Safari Mobile si planea cambiar el atributo SRC. Pero se puede evitar que mediante la creación de un elemento de imagen con un nuevo atributo SRC en lugar de cambiar el atributo SRC de un elemento de imagen existente.
var isImgLoaded = function(imgSelector){
return $(imgSelector).prop("complete") && $(imgSelector).prop("naturalWidth") !== 0;
}
// o como un plugin
$.fn.extend({
isLoaded: function(){
return this.prop("complete") && this.prop("naturalWidth") !== 0;
}
})
// $(".myImage").isLoaded()
A mi entender la propiedad integro no es estándar. Puede que no sea universal ... Me he dado cuenta que parece funcionar de manera diferente en Firefox versos IE. Estoy cargando una serie de imágenes en Javascript a continuación, comprobar si se ha completado. En Firefox, esto parece funcionar muy bien. En IE, no porque las imágenes parece que se carga en otro hilo. Sólo funciona si pongo un retraso entre mi asignación a image.src y cuando puedo comprobar la propiedad image.complete.
El uso de image.onload y image.onerror no está funcionando para mí, tampoco, porque tengo que pasar un parámetro para saber cuál es la imagen que estoy hablando cuando la función es llamada. Cualquier forma de hacer que parece fallar ya que en realidad parece pasar la misma función, no diferentes instancias de la misma función. Por lo que el valor que pase en él para identificar la imagen siempre termina siendo el último valor en el bucle. No puedo pensar en ninguna forma de evitar este problema.
En Safari y Chrome, estoy viendo la image.complete verdadera y la naturalWidth ajustada, incluso si el error de la consola muestra un 404 para esa imagen ... y extrae intencionalmente esa imagen para probar esto. Sin embargo, lo anterior funciona así para Firefox e IE.
Este fragmento de código me ayudó a problemas de almacenamiento en caché del navegador solución:
$("#my_image").on('load', function() {
console.log("image loaded correctly");
}).each(function() {
if($(this).prop('complete')) $(this).load();
});
Cuando la caché del navegador está desactivada, solamente este código no funciona:
$("#my_image").on('load', function() {
console.log("image loaded correctly");
})
Para que funcione hay que añadir:
.each(function() {
if($(this).prop('complete')) $(this).load();
});
El uso de este código JavaScript puede comprobar la imagen se carga correctamente o no.
document.onready = function(e) {
var imageobj = new Image();
imageobj.src = document.getElementById('img-id').src;
if(!imageobj.complete){
alert(imageobj.src+" - Not Found");
}
}
Prueba este
Yo tenía un montón de problemas con la carga completa de una imagen y la EventListener.
Lo que he intentado, los resultados no era fiable.
Pero entonces encontró la solución. Técnicamente no es una agradable, pero ahora nunca he tenido una carga de la imagen fallado.
Lo que hice:
document.getElementById(currentImgID).addEventListener("load", loadListener1);
document.getElementById(currentImgID).addEventListener("load", loadListener2);
function loadListener1()
{
// Load again
}
function loadListener2()
{
var btn = document.getElementById("addForm_WithImage"); btn.disabled = false;
alert("Image loaded");
}
En lugar de cargar la imagen una sola vez, acabo de cargar una segunda vez directa después de la primera vez y ambos se ejecutan a través del manejador de sucesos.
Todos mis dolores de cabeza se han ido!
Por cierto: Ustedes desde StackOverflow me ayudó ya más de cien veces. Por esta una muy grande Gracias!
Éste funcionó bien para mí:)
$('.progress-image').each(function(){
var img = new Image();
img.onload = function() {
let imgSrc = $(this).attr('src');
$('.progress-image').each(function(){
if($(this).attr('src') == imgSrc){
console.log($(this).parent().closest('.real-pack').parent().find('.shimmer').fadeOut())
}
})
}
img.src = $(this).attr('src');
});
