Как определить, когда изображение закончило загрузку?

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

вы можете привязать обработчик событий загрузки к вашему изображению с помощью jquery:

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

Answer 2

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

это сделает свое дело

Answer 3

Лучше всего предварительно загрузить изображение в JavaScript перед загрузкой DOM:

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

НЕ используйте jQuery .load() для проверки загрузки изображений. Согласно документам jQuery :

• Он не работает согласованно и не надежно кросс-браузерно

• В WebKit он не работает корректно, если для src изображения установлено то же значение src, что и раньше

• Не правильно всплывает дерево DOM

• Может перестать срабатывать для изображений, которые уже находятся в кеше браузера

Answer 4

Это действительно не имеет ничего общего с PHP; загрузка изображений выполняется на стороне клиента, поэтому вам придется делать это на стороне Javascript. Вы будете иметь дело с событиями Javascript - вот пример:

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

К счастью, jQuery имеет встроенную функцию привязки к событию для вас (даже называемую load()!), Которая позволяет вам передавать обратный вызов на срабатывание после загрузки контента.

Answer 5

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

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