javascript - style - Compruebe si una imagen está cargada(sin errores) con jQuery
title css (14)
Estoy utilizando JavaScript con la biblioteca jQuery para manipular las miniaturas de imágenes contenidas en una lista desordenada. Cuando la imagen se carga, hace una cosa, cuando se produce un error hace otra cosa. Estoy usando los métodos de carga () y error () de jQuery como eventos. Después de estos eventos, compruebo el elemento DOM de la imagen para el .complete para asegurarme de que la imagen no se haya cargado antes de que jQuery pueda registrar los eventos.
Funciona correctamente, excepto cuando se produce un error antes de que jQuery pueda registrar los eventos. La única solución que se me ocurre es usar el atributo img onerror para almacenar una "bandera" en algún lugar del mundo (o en el propio nodo) que dice que falló para que jQuery pueda verificar que "almacenar / nodo" cuando compruebe .complete.
¿Alguien tiene una mejor solución?
Edición: Puntos principales en negrita y detalles adicionales agregados a continuación: Verifico si una imagen está completa (también conocida como cargada) DESPUÉS de agregar un evento de carga y error en la imagen. De esa manera, si la imagen se cargó antes de que se registraran los eventos, lo sabré. Si la imagen no se carga después de los eventos, los eventos se encargarán de hacerlo cuando lo haga. El problema con esto es que puedo verificar fácilmente si una imagen ya está cargada, pero no puedo decir si ocurrió un error.
Así es como conseguí que funcionara en todos los navegadores utilizando una combinación de los métodos anteriores (también necesitaba insertar imágenes dinámicamente 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: Deberá proporcionar un estado booleano válido para la variable isIE.
Como entiendo la propiedad .complete no es estándar. Puede que no sea universal ... Me doy cuenta de que parece funcionar de manera diferente en Firefox versos IE. Estoy cargando una cantidad de imágenes en javascript y luego verificando si estoy completo. En Firefox, esto parece funcionar muy bien. En IE, no porque las imágenes parecen estar cargando en otro hilo. Solo funciona si pongo una demora entre mi asignación a image.src y cuando verifico la propiedad image.complete.
Usar image.onload e image.onerror tampoco me funciona, porque necesito pasar un parámetro para saber de qué imagen estoy hablando cuando se llama a la función. Cualquier forma de hacerlo parece fallar porque en realidad parece que pasa la misma función, no diferentes instancias de la misma función. Entonces, el valor que le paso para identificar la imagen siempre termina siendo el último valor en el bucle. No puedo pensar en ninguna manera de evitar este problema.
En Safari y Chrome, veo que image.complete es true y naturalWidth, incluso cuando la consola de error muestra un 404 para esa imagen ... y quité esa imagen intencionalmente para probar esto. Pero lo anterior funciona bien para Firefox e IE.
Después de leer las soluciones interesantes en esta página, creé una solución fácil de usar muy influenciada por la publicación de SLaks y Noyo que parece estar funcionando en versiones bastante recientes (como de escritura) de Chrome, IE, Firefox, Safari y Opera (todo en Windows). Además, funcionó en un emulador de iPhone / iPad que usé.
Una diferencia importante entre esta solución y la publicación de SLaks y Noyo es que esta solución comprueba principalmente las propiedades naturalWidth y naturalHeight. Descubrí que en las versiones actuales del navegador, esas dos propiedades parecen proporcionar los resultados más útiles y consistentes.
Este código devuelve VERDADERO cuando una imagen se ha cargado completamente Y con éxito. Devuelve FALSO cuando una imagen no se ha cargado completamente o NO ha podido cargarse.
Una cosa que deberá 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 en el que quieras verificar si una imagen de 0x0 píxeles se ha cargado todavía :)
Primero adjuntamos una nueva función llamada "isLoaded" al prototipo HTMLImageElement, para que la función se pueda usar en cualquier elemento de 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;
};
Luego, en cualquier momento en que necesitemos verificar el estado de carga de la imagen, simplemente llamamos a la función "isLoaded".
if (someImgElement.isLoaded()) {
// YAY! The image loaded
}
else {
// Image has not loaded yet
}
Según el comentario de Giorgian sobre la publicación de SLaks y Noyo, esta solución probablemente solo se puede usar como una comprobación por única vez en Safari Mobile si planea cambiar el atributo SRC. Pero puede solucionarlo creando un elemento de imagen con un nuevo atributo SRC en lugar de cambiar el atributo SRC en un elemento de imagen existente.
Este fragmento de código me ayudó a solucionar problemas de almacenamiento en caché del navegador:
$("#my_image").on(''load'', function() {
console.log("image loaded correctly");
}).each(function() {
if($(this).prop(''complete'')) $(this).load();
});
Cuando el caché del navegador está deshabilitado, solo este código no funciona:
$("#my_image").on(''load'', function() {
console.log("image loaded correctly");
})
Para que funcione debes agregar:
.each(function() {
if($(this).prop(''complete'')) $(this).load();
});
Probé de muchas maneras diferentes y esta es la única que me funcionó.
//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 activada una vez que todas las imágenes se hayan cargado en el DOM y estén listas. Esto aplica también para imágenes agregadas dinámicamente. http://jsfiddle.net/kalmarsh80/nrAPk/
Recuperar información de elementos de imagen en la página.
Prueba trabajando en Chrome y Firefox
Trabajando jsFiddle (abre tu 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: usé jQuery , pensé que esto se puede lograr en javascript completo
Encuentro buena información aquí OpenClassRoom -> este es un foro francés
Según mi comprensión de la especificación HTML del W3C para el elemento img , debería poder hacer esto utilizando una combinación de los atributos complete y naturalHeight , así:
function imgLoaded(imgElement) {
return imgElement.complete && imgElement.naturalHeight !== 0;
}
De la especificación para el atributo complete :
El atributo IDL completo debe devolver verdadero si se cumple alguna de las siguientes condiciones:
- El atributo src se omite.
- La tarea final que el origen de la tarea de red pone en cola una vez que se ha recuperado el recurso se ha puesto en cola.
- El elemento img está completamente disponible.
- El elemento img está roto.
De lo contrario, el atributo debe devolver falso.
Básicamente, complete devuelve verdadero si la imagen ha terminado de cargarse o no se ha podido cargar. Dado que solo queremos el caso en el que la imagen se cargue correctamente, también debemos comprobar el atributo naturalHeight :
Los atributos IDL
naturalWidthynaturalHeightdeben devolver el ancho y la altura intrínsecos de la imagen, en píxeles CSS, si la imagen está disponible, o bien 0.
Y available se define así:
Un img está siempre en uno de los siguientes estados:
- No disponible : el agente de usuario no ha obtenido ningún dato de imagen.
- Parcialmente disponible : el agente de usuario ha obtenido algunos de los datos de imagen.
- Completamente disponible : el agente de usuario ha obtenido todos los datos de la imagen y al menos las dimensiones de la imagen están disponibles.
- Roto : el agente de usuario ha obtenido todos los datos de imagen que puede, pero ni siquiera puede decodificar la imagen lo suficiente como para obtener las dimensiones de la imagen (por ejemplo, la imagen está dañada, el formato no es compatible o no se pudieron obtener datos) .
Cuando un elemento img está en el estado parcialmente disponible o en el estado completamente disponible, se dice que está disponible.
Entonces, si la imagen está "rota" (no se pudo cargar), entonces estará en el estado roto, no en el estado disponible, por lo que naturalHeight será 0.
Por lo tanto, al verificar imgElement.complete && imgElement.naturalHeight !== 0 debe indicarnos si la imagen se ha cargado correctamente.
Puede leer más sobre esto en la Especificación HTML del W3C para el elemento img , o en MDN .
Tuve muchos problemas con la carga completa de una imagen y el EventListener.
Lo que sea que probé, los resultados no fueron confiables.
Pero luego encontré la solución. Técnicamente no es agradable, pero ahora nunca tuve una carga de imagen fallida.
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 vez, simplemente la cargo una segunda vez directamente después de la primera vez y las dos se ejecutan a través del controlador de eventos.
¡Todos mis dolores de cabeza se han ido!
Por cierto: ustedes de me ayudaron ya más de cien veces. ¡Por esto un gran agradecimiento!
Usando este código JavaScript puede comprobar si la imagen está cargada 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 esto
Utilice la imagesLoaded javascript imagesLoaded .
Se puede usar con Javascript simple y como complemento jQuery.
caracteristicas:
- soportado oficialmente por IE8 +
- licencia: MIT
- dependencias: ninguna
- peso (minified y gzipped): 7kb minified (¡ligero!)
Recursos
- Proyecto en github: https://github.com/desandro/imagesloaded
- Sitio web oficial: http://imagesloaded.desandro.com/
- https://.com/questions/26927575/why-use-imagesloaded-javascript-library-versus-jquerys-window-load
- biblioteca javascript cargada con imágenes: ¿qué es el navegador y la compatibilidad con dispositivos?
Verifique las propiedades complete y de 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;
}
Detector de red en tiempo real: verifique el estado de la red sin actualizar la página: (no es jquery, sino 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 pierde la conexión, simplemente presione el botón Otra vez.
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>
Otra opción es activar los onload y / o onerror creando un elemento de imagen en memoria y configurando su atributo src atributo src original de la imagen original. Aquí hay 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!
var isImgLoaded = function(imgSelector){
return $(imgSelector).prop("complete") && $(imgSelector).prop("naturalWidth") !== 0;
}
// O como un complemento
$.fn.extend({
isLoaded: function(){
return this.prop("complete") && this.prop("naturalWidth") !== 0;
}
})
// $(".myImage").isLoaded()