Tengo un bloque de código php que carga una imagen al azar. Estoy tratando de determinar cuándo se cargó la imagen para poder realizar algunas acciones adicionales en ella. Así es como estoy cargando mi imagen actualmente:

// Gets my image
$sql = "SELECT id FROM images WHERE user_id=$owner_user_id LIMIT 0,1";
$imgres = mysql_query($sql);
if ($imgres) {
    $imgrow = mysql_fetch_array($imgres, MYSQL_ASSOC);
    if (!empty($imgrow)) {
        echo ('<image src="img.php?id=' . $imgrow['id'] . '" id="profile_img" style="visibility:hidden"/>');
    }
}

Una de las acciones que debo hacer es obtener el ancho de la imagen. Estoy obteniendo la imagen así:

alert("IMAGE WIDTH:"+$('#profile_img').width());

Actualmente devuelve 0 porque se llama antes de que se cargue la imagen. Intenté agregar esta llamada de método a mi bloque document.ready, pero aún se llama antes de que se cargue la imagen. ¿Hay una manera fácil de determinar cuándo se cargó la imagen?

1
Paul 9 sep. 2011 a las 17:48

5 respuestas

La mejor respuesta
$("#profile_img").load(function(){
   alert(("IMAGE WIDTH:"+$('#profile_img').width())
});

http://api.jquery.com/load-event/

0
genesis 9 sep. 2011 a las 13:50

Esto realmente no tiene nada que ver con PHP; la carga de la imagen se realiza en el lado del cliente, por lo que deberá hacerlo en el lado Javascript de las cosas. Tendrás que lidiar con eventos de Javascript. Aquí tienes una introducción:

http://www.quirksmode.org/js/introevents.html

Afortunadamente, jQuery tiene una función incorporada para enlazar el evento por usted (incluso llamado load()!) que le permite pasar una devolución de llamada para disparar una vez que se carga el contenido.

0
Amber 9 sep. 2011 a las 13:52

Puede vincular un controlador de eventos de carga a su imagen con jquery:

http://api.jquery.com/load-event/

1
Headshota 9 sep. 2011 a las 13:51
$(document).ready(function(){
    $('#img_id').load(function() {
       alert('image is loaded');
        });
});

Esto hará el truco

1
Senad Meškin 9 sep. 2011 a las 13:50

Su mejor opción es precargar la imagen en JavaScript antes de que se cargue el DOM:

<SCRIPT language="JavaScript">
  preload_image = new Image(25,25); 
  preload_image.src="http://mydomain.com/image.gif"; 
</SCRIPT>

NO use jQuery .load() para probar cuándo se cargan las imágenes. De acuerdo con los jQuery docs:

• No funciona de manera consistente ni [es] de manera confiable entre navegadores

• No se dispara correctamente en WebKit si la imagen src está configurada en la misma src que antes

• No burbujea correctamente el árbol DOM

• Puede dejar de activarse para imágenes que ya viven en la memoria caché del navegador

0
Blazemonger 9 sep. 2011 a las 13:55