2

我有一个带有缩略图的画廊类型页面。当您单击拇指时，它会将与该拇指有关的图像加载到隐藏的 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);
    }
}
4

1 回答 1

2

在设置图像的 src 值之前必须绑定到加载事件，否则如果图像被缓存，加载事件将在绑定之前触发。

$("<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;
    ...
于 2013-02-28T15:53:12.587 回答