load() и Opera
Здравствуйте.
Такая вот у меня проблема. Загружаю на аяксом на страницу картинки, а потом показываю блок с ними. Вот код:
$('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 |
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);
}
});
});
|
Этот пример вообще не работает.
До этого блока даже не доходит (alert не отрабатывает)
(new Image(), this.src, function(){
alert('i am here!')
countLoaded++;
window.console.log(i);
if ( countLoaded === countImages ) {
$('#products').fadeTo("slow", 1);
}
});
});
|
<!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>
|
| Часовой пояс GMT +3, время: 08:01. |