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

How do I determine when an image has finished loading?

本文关键字：加载 何时完 图像 何确定      更新时间：2023-09-26

我有一块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块中，但它仍然会在加载图像之前被调用。有没有一种简单的方法可以确定图像何时加载？

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

这将完成

您可以使用jquery:将加载事件处理程序绑定到您的图像

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

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

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

这实际上与PHP无关；图像加载是在客户端完成的，所以您需要在Javascript端完成。您将处理Javascript事件-这里有一个入门：

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

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

您最好的选择是在加载DOM之前用JavaScript预加载图像：

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

加载图像时，不要使用jQuery .load()进行测试。根据jQuery文档：

•它不能持续工作，也不能可靠地跨浏览器

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

•它没有正确地弹出DOM树

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

相关文章：