當加載所有圖像時，執行代碼

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();
?>

執行此代碼時，每個加載的圖像都會發出 jquery 警報。 我用 ajax 導入了這個 php 頁面另一個 php。

例如

1.jpg 警報 > 已加載 2.jpg 警報 > 已加載

但我想要

1.jpg 2.jpg 警報 > 所有圖片已加載

我想我改變了這段代碼

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

});

謝謝

Answer 1

緩存圖像時，加載事件不會總是觸發。 有一個jquery 插件可以解決這個問題。

Answer 2

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

我認為這段代碼可以幫助你

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!");
});