Question

我有一块PHP代码随机加载图像。我正在尝试确定图像何时加载，因此我可以对其执行一些其他操作。以下是我目前正在加载图片的方式：

// 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"/>');
    }
}

我需要做的一件事就是获取图像的宽度。我得到的图像是这样的：

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

它当前返回0，因为它是在加载图像之前调用的。我已经尝试将此方法调用添加到我的document.ready块中，但它仍然在加载图像之前被调用。有没有一种简单的方法来确定图像何时加载？

Answer 1

$(document).ready(function(){
    $('#img_id').load(function() {
       alert('image is loaded');
        });
});

这将解决问题

Answer 2

您可以使用jquery：

将加载事件处理程序绑定到您的图像

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

Answer 3

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

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

Answer 4

这与PHP无关;图像加载是在客户端完成的，所以你需要在Javascript方面做这件事。你将处理Javascript事件 - 这是一个入门：

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

幸运的是，jQuery有一个内置函数可以为你绑定事件（甚至称为load()！），它允许你在加载内容后将回调传递给。

Answer 5

最好的办法是在加载DOM之前在JavaScript中预加载图像：

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

不要使用jQuery .load()来测试何时加载图像。根据{{3}}：

•它不能一致地工作，也不能可靠地跨浏览器

•如果图像src设置为与之前相同的src，则在WebKit中无法正确触发

•它没有正确地冒泡DOM树

•对于已经存在于浏览器缓存中的图像，可以停止触发

如何确定图像何时完成加载？

5 个答案: