Форум

dadli · #1 (**permalink**) 28.08.2012, 20:53

здравствуите, есть три изображеня, ширина каждои из них 1400 пх. хочу сделать такое: после загрузки всех изображении, алертит сума ширина всех изображении, написал такои код, но в сафари и хроме, резултат етого кода иногда не коректни, (иногда 1400, иногда 2800, но иногда коректнo: 4200)
не понимаю почему так происходит, можете ви сказать ?

var images = new Array("0.jpg", "1.jpg", "2.jpg");
				
				for (var i = 0; i < images.length; i = i + 1) {
					$("#img_place").append("<img src='" + images[i] + "'>");
				}
				
				
				var loadedImgsCount = 0;
				var imgTotalWidth = 0;
				
				for (var i = 0; i < images.length; i = i + 1) {
					var currImg = new Image();
					currImg.onload = function() {
						loadedImgsCount = loadedImgsCount + 1;
						imgTotalWidth = imgTotalWidth + currImg.width;
					}
					currImg.src = images[i];
				
				}
				
				
				interv = setInterval(function() {
					if (images.length === loadedImgsCount) {
						alert(imgTotalWidth );
						clearInterval(interv);
					}
				}, 500);

Deff · #2 (**permalink**) 28.08.2012, 21:27

<script type="text/javascript">
var images = new Array("0.jpg", "1.jpg", "2.jpg");
var loadedImgsCount=0;
var imgTotalWidth = 0;
				
				for (var i = 0; i < images.length; i = i + 1) {
					$("#img_place").append('<img src="' + images[i] + '" onload="loadCoount++;">');
				}
				
	
				
				interv = setInterval(function() {
					if (images.length === loadedImgsCount) {

						$("#img_place > img").each(function() {
							imgTotalWidth+=$(this).width();
						});

						alert(imgTotalWidth );
						clearInterval(interv);
					}
				}, 120);
</script>

dadli · #3 (**permalink**) 28.08.2012, 21:57

Deff,
мне кожется ви хотели написать не

Цитата:

onload="loadCoount++;");

а

Цитата:

onload="loadedImgsCount++;");

но... разве ето правилно? консол ошибки говорит что loadedImgsCount не определенни

Deff · #4 (**permalink**) 28.08.2012, 22:07

Тады так:

<script type="text/javascript">
  var images = new Array("0.jpg", "1.jpg", "2.jpg");

  var loadedImgsCount=0;
				function CntLoad() {
					loadedImgsCount++;
				}

				loadedImgsCount
				for (var i = 0; i < images.length; i = i + 1) {
					$("#img_place").append('<img src="' + images[i] + '" onload="CntLoad()">');
				}
				
	
  var imgTotalWidth = 0;
				interv = setInterval(function() {
					if (images.length === loadedImgsCount) {

						$("#img_place > img").each(function() {
							imgTotalWidth+=$(this).width();
						});

						alert(imgTotalWidth );
						clearInterval(interv);
					}
				}, 120);
</script>

dadli · #5 (**permalink**) 28.08.2012, 22:12

Deff,
сеичас консол говорит: CntLoad is not defined

Deff · #6 (**permalink**) 28.08.2012, 22:23

dadli,
Ни наю - уменя работает:

<!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" xml:lang="ru" lang="ru" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Общие вопросы от новичков (40)</title>

<script type="text/javascript" src="http://yandex.st/jquery/1.4.4/jquery.min.js"></script>


</head>
<body>

<div id="img_place"></div>
<script type="text/javascript">
  var images = new Array("http://s1.uploads.ru/i/AzDL4.jpg", "http://s1.uploads.ru/i/5Xyis.jpg", "http://s1.uploads.ru/i/JHdsf.jpg");

  var loadedImgsCount=0;
				function CntLoad() { 
					loadedImgsCount++;

				}

				loadedImgsCount
				for (var i = 0; i < images.length; i = i + 1) {
					$("#img_place").append('<img src="' + images[i] + '" onload="CntLoad()">');
				}
				
	
  var imgTotalWidth = 0;
				interv = setInterval(function() {
					if (loadedImgsCount == 2*images.length) {

						$("#img_place > img").each(function() {
							imgTotalWidth+=$(this).width();
						});

						alert(loadedImgsCount);
						alert(imgTotalWidth );
						clearInterval(interv);
					}
				}, 120);
</script>

</body>
</html>

dadli · #7 (**permalink**) 28.08.2012, 22:51

Deff,
спасибо балшое, и скажите пожалуиста, что в етом

Цитата:

$("#img_place > img")

записе означает знак ">" ?

Deff · #8 (**permalink**) 28.08.2012, 22:54

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

записе означает знак ">" ?

Что img -относиться к #img_place как прямой дочерний элемент

dadli · #9 (**permalink**) 28.08.2012, 22:59

Deff,
понятно, спасибо вам

Deff · #10 (**permalink**) 28.08.2012, 22:59

dadli,
Ксать cобытие загрузки через jQuery если оно в теге - возникает дважды

Поправил скрипт

Форум

Справочник

Discord чат

Курсы javascript