Форум

max12345 · #1 (**permalink**) 13.07.2011, 19:50

Здравствуйте.
Такая вот у меня проблема.
Загружаю на аяксом на страницу картинки, а потом показываю блок с ними. Вот код:

$('img', $('.oneproduct a')).each(function(){
	$(this).load(function() {
		i++;
		alert(i)
		if(i == $('.oneproduct a img').length)
			$('#products').fadeTo("slow", 1);
	});
});

В опере наблюдается такая картина: всего картинок 16, а последний алерт (его я вставил для отладки) появляется то на 9 то на 12.
В других браузерах все ок. Опера 11.50

nikita.mmf · #2 (**permalink**) 14.07.2011, 15:56

var $images = $(".oneproduct a img"), countImages = $images.length, countLoaded = 0;
$images.each(function(){
       (function (imgOb, src, callback) {
           imgObj.onload = function(){
               imgObj = imgObj.onload = null;
               callback();
           };
           imgObj.src = src;
       })(new Image(), this.src, function(){ 
           countLoaded++;
           window.console.log(i);
           if ( countLoaded === countImages ) {
               $('#products').fadeTo("slow", 1);
           }
       });
});

max12345 · #3 (**permalink**) 15.07.2011, 16:37

Этот пример вообще не работает.
До этого блока даже не доходит (alert не отрабатывает)

(new Image(), this.src, function(){ 
           alert('i am here!')
           countLoaded++;
           window.console.log(i);
           if ( countLoaded === countImages ) {
               $('#products').fadeTo("slow", 1);
           }
       });
});

nikita.mmf · #4 (**permalink**) 15.07.2011, 18:20

<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8"/>
	<title></title>
	<!--link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/base/jquery-ui.css" type="text/css" media="all"/-->
	<style type="text/css">
		body { width: 400px; margin: 100px auto 0; padding : 0; }
		a { display: inline-block; margin: 10px; }
	</style>
	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
	<!--script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js"></script-->
</head>
<body>
	<div class="oneproduct"><a href="#"><img src='http://img4-fotki.yandex.net/get/5409/38219045.10/0_STATIC5679c_d292e83e_S1' height='99' width='99' border='0'/></a><a href="#"><img src='http://img4-fotki.yandex.net/get/5506/118302398.37/0_STATIC4db24_7c902de3_S1' height='99' width='99' border='0'/></a><a href="#"><img src='http://img7-fotki.yandex.net/get/5211/39970978.45/0_STATICcf237_2448f084_S1' height='99' width='99' border='0'/></a><a href="#"><img src='http://img-fotki.yandex.net/get/4406/82993987.0/0_STATIC5ac40_3d4fd4a3_S1' height='99' width='99' border='0'/></a><a href="#"><img src='http://img3-fotki.yandex.net/get/5606/101140975.7/0_STATIC6068b_e7175135_S1' height='99' width='99' border='0'/></a><a href="#"><img src='http://img4-fotki.yandex.net/get/4408/60324533.a/0_STATIC76bcc_9eb80b30_S1' height='99' width='99' border='0'/></a><a href="#"><img src='http://img4-fotki.yandex.net/get/4704/81563225.f0/0_STATIC5b5ac_4eefcff4_S1' height='99' width='99' border='0'/></a><a href="#"><img src='http://img3-fotki.yandex.net/get/5409/84246114.22/0_STATIC70643_f7a6613e_S1' height='99' width='99' border='0'/></a><a href="#"><img src='http://img6-fotki.yandex.net/get/5706/24833298.f0/0_STATIC62786_174b8cc0_S1' height='99' width='99' border='0'/></a><a href="#"><img src='http://img6-fotki.yandex.net/get/5807/24741036.af/0_STATIC80c1e_140d6717_S1' height='99' width='99' border='0'/></a><a href="#"><img src='http://img5-fotki.yandex.net/get/5908/27739862.34/0_STATIC7d85d_585b6dd9_S1' height='99' width='99' border='0'/></a></div>
	
	<script type="text/javascript">
		var $images = $(".oneproduct a img"), countImages = $images.length, countLoaded = 0, start = new Date().getTime();
		$images.each(function(){
			   (function (imgObj, src, callback) {
				   imgObj.onload = function(){
					   imgObj = imgObj.onload = null;
					   callback();
				   };
				   imgObj.src = src;
			   })(new Image(), this.src, function(){ 
				   countLoaded++;
				   window.console.log(countLoaded);
				   if ( countLoaded === countImages ) {
					   alert("All photos successfully uploaded. Time = " + (new Date().getTime() - start) );
				   }
			   });
		});
	</script>

</body>
</html>

Форум

Справочник

Discord чат

Курсы javascript