When All images loaded, execute a code

Question

add.php

<script type="text/javascript">
$("img").load(function() {
     alert("all images loaded");
});
</script>
<?php 
function resim1(){
?>
<img height="150" weight="150" src="http://uyarer.com/linux/deneme.png"/>
<?php
}
?>

<?php 
function resim2(){
?>
<img height="150" weight="150" src="http://hunturk.net/resim-cnNtL2dhbGVyaS9iYXlyYWsvZTc4M2NlYzRlYi5qcGc=-1024-768.png"/>
<?php
}
?>
<?php 
 resim1();
 resim2();
?>

when executed this code.,the jquery alert for every loaded images. I imported this php page another php with ajax.

For example

1.jpg alert > loaded 2.jpg alert > loaded

but i want

1.jpg 2.jpg alert > all images loaded

i guess i change this code

$(**"img"**).load(function() {
 alert("all images loaded");

});

Thanks

Answer 1

Load event won't always fire when images are cached. There is a jquery plugin to address this issue.

Answer 2

var imgNum=$('img').length;
$('img').load(function(){
    if(!--imgNum){alert('All images loaded')}
})

I think this code can help you

Answer 3

var imgSize = 0;
var loaded = 0;
var _tim = 0;
$(document).ready(function()
{
 imgSize = $('img').size();
 $('img').load(function() {
   loaded++;
   clearTimeout(_tim);
  _tim =   setTimeout(function() { if(imgSize == loaded) { alert('all images are loaded'); }, 200);
});
});

Answer 4

var imagesPre = new Array;
var success = new Array;

$('img').each(function(){
  imagesPre.push(this.src);
});

for (i = 0; i < imagesPre.length; i++) {
    (function(path, success) {
        image = new Image();
        image.onload = function() {
          success.resolve();
        };
        image.src = path;
    })(imagesPre[i], success[i] = $.Deferred());
}

$.when.apply($, success).done(function() {
  alert("All image!");
});