javascript - 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);
        });
    });
});