jQuery預加載多個圖像然後調用事件

Question

我想在加載所有圖像後觸發事件。 還有，我想每個圖像標籤附加到特定div#ID就像：

image01.jpg -> <div id="load01"></div> 

image02.jpg -> <div id="load02"></div> 

image03.jpg -> <div id="load03"></div> 
... 

我被困在中間......

HTML

<div id="blinker0">Smooth Blink</div> 
<div class="profile" id="blinker1"></div> 
<div class="profile" id="blinker2"></div> 
<div class="profile" id="blinker3"></div> 
<div class="profile" id="blinker4"></div> 
<div class="profile" id="blinker5"></div> 

JS：

function smBlink(){ 
    for(i=0;i<3;i++) { 
    $("#blinker0,#blinker1, #blinker2, #blinker3, #blinker4, #blinker5") 
    .fadeTo('normal', 0.3) 
    .fadeTo('normal', 1.0); 
    } 
} 

$('<img />') 
.attr('src', 'http://placekitten.com/160/160') 
.load(function(){ 
$('#blinker1').append($(this)); 
smBlink(); 
}); 

活樣本：http://jsfiddle.net/nori2tae/E4erT/

我提到這個網站：http://jquery-howto.blogspot.jp/2009/02/preload-images-with-jquery.html

Answer 1

您可以使用imagesLoaded插件和無形保持元件圖像預載：http://jsfiddle.net/imsky/E4erT/15/

$.each([1, 2, 3, 4, 5], function(i, j) { 
    $("#invisible").append(
    $("<img />").attr("src", 
    "http://placekitten.com/" + j * (20 + Math.floor(Math.random() * 30)) + 
    "/" + j * 24)) 
}); 
$(function() { 
    $("#invisible").imagesLoaded(function(img) { 
     img.each(function(index, el) { 
      $("#blinker" + (index + 1)).append(el); 
     }); 
    }); 
});