Comprobar carga de imagen

webelgrillo · #1 (**permalink**) 18/08/2008, 10:59

Hola phperos.

en mi pagina web tengo una imagen.

Como puedo decirle en php o comprobar si esa imagen se ha cargado o no, si la imagen se ha cargado que ejecute una accion pero si la imagen no se cargo ejecuta otra accion..

ayudenme y como es el script gracias....

SergeMedina · #2 (**permalink**) 18/08/2008, 11:08

Como se ha cargado en el navegador? Eso unicamente lo puedes saber con Javascript.

Panino5001 · #3 (**permalink**) 18/08/2008, 11:08

Con php no podés hacer esa comprobación, ya que se trata de un proceso que ocurre en el navegador, no en el servidor. Necesitás javascript u otra herramienta del lado del cliente para eso

.
Concretamente, en javascript podrías usar el evento onload del tag img.

webelgrillo · #4 (**permalink**) 18/08/2008, 11:18

OK gracias ya entendi que en php no se podra pero alguien que me pueda ayudar en el codigo con javascript o que me digan una pagina de referencia gracias....

Panino5001 · #5 (**permalink**) 18/08/2008, 11:22

Código PHP:

  <script> 
function loquesea(){ 
alert('hola'); 
} 
</script> 
<img src="algo.jpg" onload="loquesea()" />

webelgrillo · #6 (**permalink**) 18/08/2008, 11:44

Ok gracias por tu ayuda eres super.

ya ok ya esta todo correcto. no domino mucho java.

quiero que no me mande una ventana energente sino que solo imprima encima de la imagen: "imagen no encontrada" o "imgen no encontrada. asi como un echo.

para luego mdarle mis condiciones en php

<script>
function loquesea(){
alert('hola');
}
</script>
<img src="algo.jpg" onload="loquesea()" />

GatorV · #7 (**permalink**) 18/08/2008, 12:02

Tema trasladado a Javascript.

David · #8 (**permalink**) 18/08/2008, 12:11

Lo que te puso Panino5001 fue solo un ejemplo. El secreto está en que el evento onload no se produce si la imagen no existe. Así que puedes tener el texto "Imagen no encontrada" y en el evento onload ocultarlo.

Panino5001 · #9 (**permalink**) 18/08/2008, 12:33

En ese caso, quizá te conviene comprobar cuando la imagen no carga correctamente:

Código PHP:

  <img src="algo.jpg" onerror="this.parentNode.replaceChild(document.createTextNode('la imagen no existe'),this)" />

David · #10 (**permalink**) 18/08/2008, 12:39

Lo del onerror no lo sabía, gracias Panino5001 por el dato.

Panino5001 · #11 (**permalink**) 18/08/2008, 12:44

Pues es una de las cosas que aprendí de tunait ;)

farra · #12 (**permalink**) 18/08/2008, 15:20

proba con AJAX

webelgrillo · #13 (**permalink**) 18/08/2008, 16:45

quiero hacer en mi pagina que verifique que una imagen ha cargado si no ha cargado que cumpla una funcion, de lo contrario otra.

quiero que se integren java con php

que en java verifique que ha cargado la imagen si ha cargado la imagen que en php imprima "carga de imagen con exito"

pero si la imagen no ha cargado previa verificacion en java que en php me diga "imagen no encontrada"

para yo asi decirle en php que si carga la imagen que cumpla una funcion, pero si no carga que cumpla otra.

aqui pongo la funcion en java que verfica si una imagen ha cargado un ejemplo.
<script>
function loquesea(){
alert('hola');
}
</script>
<img src="algo.jpg" onload="loquesea()" />

ayudenme en este dilema.

Panino5001 · #14 (**permalink**) 18/08/2008, 17:43

Lo primero que tenés que entender es que javascript (no java) y php funcionan en ambientes diferentes y no es posible mezclarlos. No obstante eso, podés hacer que los eventos relacionados con la carga disparen requests a archivos php. Un ejemplo:

Código PHP:

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>test</title>
<script>
function adjs(url){
    oldsc=document.getElementById("old_sc");
       if(oldsc)
            document.getElementsByTagName('body')[0].removeChild(oldsc);
    sc=document.createElement('script');
    sc.id="old_sc";
    sc.src=url+'&'+Math.random();
    document.getElementsByTagName('body')[0].appendChild(sc);
    sc=null;
}
</script> 
</head>

<body>
<img src="algo.jpg" onerror="adjs('NoCarga.php?')" onload="adjs('SiCarga.php?')" />
</body>
</html>

De esa manera, llamás a los procesos que quieras en cada caso. Ahora bien, si querés que ocurra algo en la página principal (que se escriba algo en algun lado, por ejemplo), podés hacer que tus archivos php generen una salida javascript que actúe sobre algún elemento. Avisanos si necesitás ayuda con esto.

webelgrillo · #15 (**permalink**) 18/08/2008, 18:02

gracias por tu ayuda.

estoy probando este codigo tan igual como me pasaste pero no me funciona no se en que estoy fallando. ayuda

Panino5001 · #16 (**permalink**) 18/08/2008, 18:25

A ver, vamos con ejemplo commpleto:
Archivo principal:

Código PHP:

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
<title>test</title> 
<script> 
function adjs(url){ 
    oldsc=document.getElementById("old_sc"); 
       if(oldsc) 
            document.getElementsByTagName('body')[0].removeChild(oldsc); 
    sc=document.createElement('script'); 
    sc.id="old_sc"; 
    sc.src=url+'&'+Math.random(); 
    document.getElementsByTagName('body')[0].appendChild(sc); 
    sc=null; 
} 
</script>  
</head> 
 
<body> 
<img id="pp" src="1.jpg" onerror="adjs('NoCarga.php?')" onload="adjs('SiCarga.php?')" /> 
</body> 
</html>

Archivo SiCarga.php:

Código PHP:

  <?php  
echo 'alert("ok")'; 
?>

Archivo NoCarga.php:

Código PHP:

  <?php  
echo 'document.getElementById("pp").parentNode.replaceChild(document.createTextNode("no cargó"),document.getElementById("pp"))'; 
?>

Subí los 3 a un directorio y ejecutá el primero.

webelgrillo · #17 (**permalink**) 18/08/2008, 18:48

OK esta ok pero como hago si no quiero que mande esa alerta: echo 'alert ("ok")';

no quiero que me muestre esa ventana emergente si no que me escriba el texto.

Panino5001 · #18 (**permalink**) 18/08/2008, 19:07

Todo depende de dónde necesitás que aparezca el texto. Un ejemplo de SiCarga.php:

Código PHP:

  <?php  
echo 'var i=document.createElement("img");i.src=document.getElementById("pp").src; 
document.getElementById("pp").parentNode.insertBefore(i,document.getElementById("pp"));document.getElementById("pp").parentNode.replaceChild(document.createTextNode("cargó correctamente"),document.getElementById("pp"))'; 
?>

Panino5001 · #19 (**permalink**) 18/08/2008, 19:12

Y otra manera, agregando un elemento para colocar el texto abajo de la imagen:
Principal:

Código PHP:

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
<title>test</title> 
<script> 
function adjs(url){ 
    oldsc=document.getElementById("old_sc"); 
       if(oldsc) 
            document.getElementsByTagName('body')[0].removeChild(oldsc); 
    sc=document.createElement('script'); 
    sc.id="old_sc"; 
    sc.src=url+'&'+Math.random(); 
    document.getElementsByTagName('body')[0].appendChild(sc); 
    sc=null; 
} 
</script>  
</head> 
 
<body> 
<img id="pp" src="1.jpg" onerror="adjs('NoCarga.php?')" onload="adjs('SiCarga.php?')" /> 
<div id="status" style="display:none"></div> 
</body> 
</html>

SiCarga.php:

Código PHP:

  <?php  
echo 'document.getElementById("status").innerHTML="Cargó correctamente";document.getElementById("status").style.display="block"'; 
?>

webelgrillo · #20 (**permalink**) 18/08/2008, 19:13

Gracias ok esta todo ok ahora si hare las modificaciones que necesito gracias por tu ayuda.

si tengo mas dudas ya se ha quien buscar gracias....

Panino5001 · #21 (**permalink**) 18/08/2008, 19:15

Bueno, me alegra que te haya servido

webelgrillo · #22 (**permalink**) 18/08/2008, 19:44

hay algo que quiero que haga en el principal.

que cuando sea NoCarga que me lleve a otra pagina osea que cargue en una nueva ventana, de igual manera si es SiCarga que me mande a la pagina pero en nueva ventana.

que cargue en una ventana nueva.

te pongo el codigo.

<img id="pp" src="1.gif" onerror="adjs('NoCarga.php?a=a')" onload="adjs('SiCarga.php?b=<?=$_b?>&c=<?=$_c?>')" />

ayudame.

Panino5001 · #23 (**permalink**) 18/08/2008, 20:07

Para cargar en la misma página, la salida de tu php debería ser:

Código PHP:

  <?php 
echo 'window.location="nombrepagina.php"'; 
?>

Para cargar en una nueva ventana:

Código PHP:

  <?php 
echo 'window.open("nombrepagina.php")'; 
?>

webelgrillo · #24 (**permalink**) 18/08/2008, 20:42

'window.location="nombrepagina.php"'

este mismo codigo quiero manejar

pero en el archivo principal osea en:

<img id="pp" src="1.gif" onerror="adjs('NoCarga.php?')" onload="adjs('SiCarga.php?')" />

para que defrente cargue el archivo php y ejecute sus funciones.

gracias....

caricatos · #25 (**permalink**) 19/08/2008, 05:28

Hola:

La verdad que redireccionar dependiendo de una imagen, me suena absurdo... tal vez solo quieras mostrar un mensaje (incluso generado por php...)

Puedes poner los mensajes en capas ocultas y activar la capa que asocies al evento previamente...

primero creo un alias para simplificar código:
function tag(id) {return document.getElementById(id);}

y la chicha:

<img src="1.gif" alt="ejemplo" onerror="tag('error_si').style.display = 'block'"
onload="tag('error_no').style.display = 'block'" />
<div id="error_si" style="display: none" >Error en imagen</div>
<div id="error_no" style="display: none" >Imagen cargada satisfactoriamente</div>

Fíjate que los contenidos puedes crearlos con anterioridad desde php.

Saludos

Panino5001 · #26 (**permalink**) 19/08/2008, 06:28

Sí, la verdad a mi también me resulta absurdo. Para eso, sobre todo si uno maneja pobremente javascript, conviene predecir la carga de la imagen desde el servidor usando herramientas como file_exists, is_readable, o simplemente viendo si getimagesize genera algún error.

webelgrillo · #27 (**permalink**) 20/08/2008, 19:51

<img id="pp" src="1.gif" onerror="'window.location="error.php?a=loqsea"'" onload="adjs("'window.location="noerror.php?b=loqs ea"')" />

solo quiero adaptar el 'window.location dentro de adjs

David · #28 (**permalink**) 21/08/2008, 06:11

El window.location no necesitas poner dentro de la función adjs, solo quítalo y listo. Así:

Código PHP:

  <img id="pp" src="1.gif" onerror="window.location='error.php?a=loqsea'" onload="window.location='noerror.php?b=loqs ea'" />