Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   Как определить загрузилось ли изображение (https://javascript.ru/forum/jquery/9793-kak-opredelit-zagruzilos-li-izobrazhenie.html)

Andrei 06.06.2010 07:22
Как определить загрузилось ли изображение
 
Здравствуйте!

Как определить с помощью jquery окончание загрузки изображения ?

exec 06.06.2010 07:42 
$(image).bind('load', handler);

Andrei 06.06.2010 08:13
exec,
У меня url подгружается через ajax, нужно запустить анимацию появления после загрузки изображения
Как в этом случае определить ?

$.ajax({
type: "POST",
url: "/rand_header.php",
data: "userHour="+myHour,
success: function(pic){
$('#header').css('backgroundImage', 'url('+pic+')');
$('#header').animate({'opacity':'1'}, 230);
}
});

exec 06.06.2010 08:48
Andrei, background нельзя анимаировать через animate.

$.ajax({
type: "POST",
url: "/rand_header.php",
data: "userHour="+myHour,
success: function(pic){
$('#header').append('<img style="opacity: 0;" src="' + pic + '" />').bind('load', function () {
$(this).fadeIn();
});
}
});

Andrei 06.06.2010 09:04
exec, Я анимирую DIV с background

Andrei 06.06.2010 09:12
exec, a если так ?

$.ajax({
type: "POST",
url: "/rand_header.php",
data: "userHour="+myHour,
success: function(pic){
    myImage = new Image();
    function write(){
        $('#header').css('backgroundImage', 'url('+myImage.src+')');
        $('#header').animate({'opacity':'1'}, 230); 
    }
 
    myImage.onload = write;
    myImage.src = '/themes/images'+pic;
}
});

exec 06.06.2010 09:17
Ну тогда лучше так

$.ajax({
type: "POST",
url: "/rand_header.php",
data: "userHour="+myHour,
success: function(pic){
$('<img src="' + pic + '" />').bind('load', function () {
$('#header').css('backgroundImage', this.src).fadeIn(230);
});
});
}
});

Andrei 06.06.2010 09:46
Работает, спасибо!
С fadeIn почему-то не работало, я заменил на animate

Weeee 20.07.2010 17:07
Способ .load не работает в Opera 10.

Kolyaj 20.07.2010 17:23
Работает.

Weeee 20.07.2010 17:27
Если изображение не в кеше.

Kolyaj 20.07.2010 17:38 
var img = new Image();
img.onload = function() { alert('load'); };
img.src = 'http://javascript.ru/forum/images/ca_serenity/misc/logo.gif';
Обновляю страницу -- всё работает.

Weeee 20.07.2010 17:56
$("img").each( function() {
$(this).bind('load', function () {
alert('load');
});
});

А так?

Kolyaj 20.07.2010 18:03
Ну можно данный код на onload повесить, чтобы уж наверняка все изображения на этот момент загружены были.

Weeee 20.07.2010 18:08
С парой сотен изображений такой подход не больно оправдан :)

Kolyaj 20.07.2010 18:12
Weeee,
это был сарказм. Вы вешаете обработчик на событие, которое уже произошло. Что вы хотите получить? Если уж сильно хочется именно такой код, то проверяйте свойство complete у изображений.

Weeee 20.07.2010 18:25
Я его, естествено, тоже проверяю, в опере все равно не работает :)

if (this.complete) {
$(this).trigger('load');
}

Weeee 20.07.2010 18:32
Это уже не смешно даже.
$(img").each( function() { 

	$(this).bind('load', function () {
	     alert('bind');	
	});
	
        if (this.complete){
               alert('trig');
	       $(this).trigger('load');			
	}

		
	});


В опере ни одного сообщения не появляется.

Weeee 20.07.2010 18:53 
if (this.complete){
		alert('hello1');
	} else $(this).bind('load', function(){
                alert('hello2');
	});


Если изображения поместить в блок со своейством display: none;, то Opera 10 показывается hello2. Если же убрать display: none;, то мы увидим только hello1.

А если изображение уже было в кеше, то вообще никакого сообщения мы не увидим!

Weeee 20.07.2010 20:38
Короче говоря, как я и говорил, не работает.

Kolyaj 20.07.2010 20:44 
var imgs = document.getElementsByTagName('img');
for (var i = 0; i < imgs.length; i++) {
    if (imgs[i].complete) {
        alert('loaded');
    } else {
        imgs[i].onload = function() {
            alert('loaded');
        }
    }
}

Всё работает.

рони 20.07.2010 20:58
а так? ....
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1251" />
  <title></title>
</head>

<body>   <div id='img_hide' style="display: none"></div>
<script language="JavaScript" type="text/javascript">
function img_load() {
    for (var b = document.getElementById("img_hide"), d = arguments.length, c = 0; c < arguments.length; c++) {
        var a = new Image;
        a.onload = function () {
            b.appendChild(this);
            if (b.childNodes.length == d) {
                b.style.display = ""
            }
        };
        a.onerror = function () {
            var e = document.createTextNode(this.src + " \u043d\u0435\u0442 ");
            b.appendChild(e);
            if (b.childNodes.length == d) {
                b.style.display = ""
            }
        };
        a.src = arguments[c];
        (a.fileSize !== undefined ? a.fileSize > -1 : a.width) && a.onload()
    }
};
img_load('http://javascript.ru/forum/images/ca_serenity/misc/logo.gif','logo.gif','http://javascript.ru/forum/images/ca_serenity/misc/logo.gif')
</script>
</body>
</html>

subzey 21.07.2010 21:56
Опера, кстати, меня что-то с ветки 10.50 не радует.
Не по-норвежски как-то они браузер начали делать.

utb 06.11.2014 14:10
а как можно проверить подгрузилось изображение или нет из css ?)


Часовой пояс GMT +3, время: 13:03.