我有一个带有缩略图的画廊类型页面。当您单击拇指时,它会将与该拇指有关的图像加载到隐藏的 div 中,当它们加载完成后,div 然后会滑动打开。如果您单击另一个拇指,它会关闭 div,清除内容,加载新内容,然后再次打开它。当您加载页面时,您可以单击一个拇指,然后单击另一个,但是如果您返回到第一个拇指并单击 div 将不会再次打开,不知道为什么。感谢您对此提供的任何帮助。
我在这里设置了一个 jsbin http://jsbin.com/epawub/12/edit
我为拇指设置的 javascript 如下:
var imgCount = 0;
var image=$('#images');
$('#klossviolins').click(function() {
console.log("Loading...");
$('#images').slideUp(500, function() {
$("#images").empty().ready(function(){
$("<img>", {
src: "http://www.klossal.com/images/klossviolins/home.jpg"
}).appendTo("#images").load(onImage);
$("<img>", {
src: "http://www.klossal.com/images/klossviolins/services.jpg"
}).appendTo("#images").load(onImage);
});
});
$("#info_header").empty();
$('#info_header').append("Kloss Violins Website");
});
$('#light_dance').click(function() {
console.log("Loading...");
$('#images').slideUp(500, function() {
$("#images").empty().ready(function(){
$("<img>", {
src: "http://www.klossal.com/light_dance_1.jpg"
}).appendTo("#images").load(onImage);
$("<img>", {
src: "http://www.klossal.com/light_dance_var.png"
}).appendTo("#images").load(onImage);
$("<img>", {
src: "http://www.klossal.com/light_dance_2.jpg"
}).appendTo("#images").load(onImage);
});
});
$("#info_header").empty();
$('#info_header').append("Dancing With Light Series");
});
function onImage(e)
{
console.log("Image loaded");
imgCount++;
if (imgCount == image.children().length)
{
image.slideDown(500);
}
}
最佳答案
您必须在设置图像的 src 值之前绑定(bind)到 load 事件,否则如果图像被缓存,load 事件将在您绑定(bind)之前触发。
$("<img>").load(onImage).attr("src","http://www.klossal.com/light_dance_1.jpg").appendTo("#images");
// repeat for all similar
此外,请确保将 imgCount 重置回 0。
...
if (imgCount == image.children().length)
{
image.slideDown(500);
imgCount = 0;
...
关于jquery 函数只能运行一次,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15139722/