Форум

Почемучкин · #1 (**permalink**) 18.10.2012, 07:41

Как отличить какие изображения уже загрузились, а какие ещё нет?

Внимание: я не могу заранее повесить свою функцию на onload. Скрипт начинает работать с задержкой, когда дерево DOM уже загружено и вебстраница находится в состояниях "еще грузится" или "уже все загружено".
Вот тут и надо понять какие изображения еще не загрузились или загрузились не до конца.

Kos · #2 (**permalink**) 18.10.2012, 08:18

Вот jquery-плагин http://desandro.github.com/imagesloaded/, который позволяет ставить обработчик на момент загрузки всех изображений, если же тебе нужно по отдельности - присваивай изображениям идентификаторы, и в load-обработчике для каждого изображения отмечай какое загрузилось, лучше в массиве, так ты в любой момент времени сможешь понять какие уже загружены, какие еще нет

Почемучкин · #3 (**permalink**) 18.10.2012, 08:49

Я ж сказал, что не могу повесить onload заранее

Нашел тут инфу, что есть такой флажок, как img.complete
Скажите - оно во всех браузерах работает или нет, а может особенности какие-то у .complete есть?

melky · #4 (**permalink**) 18.10.2012, 18:23

Сообщение от Почемучкин

Скажите - оно во всех браузерах работает или нет, а может особенности какие-то у .complete есть?

в доках всё есть :
http://www.w3.org/TR/DOM-Level-2-HTM...ml#ID-17701901 - старая дока. HTML4
https://developer.mozilla.org/en-US/...MLImageElement - новая дока HTML5 раз
http://www.whatwg.org/specs/web-apps...mlimageelement - новая дока HTML5 два
http://www.w3.org/TR/html-markup/img.html - новая дока HTML5 три

СПОЙЛЕР : (можно посмотреть ссыль на MDN и успокоиться - это свойство появилось в HTML5, а это значит, что старообрядцы (угадайте, кто) не имеют этого свойства)

но мы знаем, что IE имеет свой монастырь

http://msdn.microsoft.com/en-us/libr...=vs.85%29.aspx

как вы думаете, можно ли получить, к примеру, размер изображения (скольок занимает на диске), если оно ещё не загружено ?

Nekromancer · #5 (**permalink**) 18.10.2012, 18:32

melky,
IE имеет. Множество в HTML5 взято из IE. В частности потому, что Microsoft это предложил и потому, что бы было легче делать полифилы.

Nekromancer · #6 (**permalink**) 18.10.2012, 18:34

Цитата:

True if the browser has fetched the image, and it is in a supported image type that was decoded without errors.

Соответственно если будет ошибка, то complete никогда не придёт.

melky · #7 (**permalink**) 18.10.2012, 18:56

Сообщение от Nekromancer

melky,
IE имеет. Множество в HTML5 взято из IE. В частности потому, что Microsoft это предложил и потому, что бы было легче делать полифилы.

хм ... но не до такой же степени

я нашёл костыль ... ну, "помощь в определении загрузки картинки".

обновил предыдущий пост.

Сообщение от Nekromancer

Соответственно если будет ошибка, то complete никогда не придёт.

я вижу решение проблемы так :

if (myImg.complete === false) {
     // у картинки есть это свойство, и она почему-то не загружена
    // загружаем заново, и вешаем обработчики на error и load 
}

Nekromancer · #8 (**permalink**) 18.10.2012, 19:27

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
	</head>
	<body>
		<script>

function log(arg) {
var div = document.createElement('div');
div.innerHTML = arg;
document.body.appendChild(div);
}
			(function() {
				var img = new Image();
				img.onload = function() {
					setTimeout(function() {
						log(img.complete + ' load 1 ' + img.getAttribute('complete'));
					}, 1);
				};
				img.src = 'http://javascript.ru/files/onready/img5.php';
				document.body.appendChild(img);
				log(img.complete + ' not load 1 ' + img.getAttribute('complete'));
			}());
			
			(function() {
				var img = new Image();
				img.onload = function() {
					setTimeout(function() {
						log(img.complete + ' load  2' + img.getAttribute('complete'));
					}, 1);
				};
				img.onerror = function() {
					setTimeout(function() {
						log(img.complete + ' error 2 ' + img.getAttribute('complete'));
					}, 1);
				};
				img.src = 'about:blank';
				document.body.appendChild(img);
				log(img.complete + ' not load 2 ' + img.getAttribute('complete'));
			}());
		</script>
	</body>
</html>

Говорю же, что работает в ИЕ, проверь

melky · #9 (**permalink**) 18.10.2012, 19:30

Сообщение от Nekromancer

Говорю же, что работает в ИЕ, проверь

заменить бы console.log на alert - я открыл в IE 8 , и ничего не увидел.

Nekromancer · #10 (**permalink**) 18.10.2012, 19:31

melky,
Там и средства разработки есть, F12 -> Сценарии

Форум

Справочник

Discord чат

Курсы javascript