2

サムネイル付きのギャラリータイプのページがあります。親指をクリックすると、その親指に関係する画像が非表示の div に読み込まれ、読み込みが完了すると div が開き、スライドが開きます。別の親指をクリックすると、div が閉じられ、コンテンツがクリアされ、新しいコンテンツが読み込まれてから再び開かれます。ページをロードすると、1 つのサムをクリックしてから別のサムをクリックできますが、最初のサムに戻って 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値を設定する前に、loadイベントにバインドする必要があります。そうしないと、画像がキャッシュされている場合、バインドする前にloadイベントがトリガーされます。

$("<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 に答える