我想在加载所有图像后触发事件。
而且,我想将每个图像标记附加到特定的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
答案 0 :(得分:2)
您可以使用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);
});
});
});