.loadコールバック関数が動作することがありますか？

Question

私の画像ギャラリーには、次のリンクと前のリンクがあります。どちらかをクリックすると#the_image divに画像が読み込まれますが、毎回画像のサイズを変更する必要があります。私の考えでは、.loadのコールバック関数としてイメージのサイズを変更するコードを記述します。しかし、それは毎回機能しません。奇妙なことにも、私がの後にalert("blah");を置くと、イメージは毎回正確に配置されます。何か案は？

<script type="text/javascript"> 
$(document).ready(function() { 
    $('#previous').live('click', function(e){ 
    $('#img_wrapper').load($(this).attr('href') + ' #container',function() { 
     var height = $(window).height(); 
     var width = $(document).width(); 
     var image = $('#the_image'); 
     $("#the_image").css("max-height",height-200); 
     image.css({ 
     'max-height': height-200,  
     'left': width/2 - (image.width() /2)-5, 
     'top': height/2 -(image.height() /2), 
     }); 
     prev = $('#previous'); next = $('#next'); 
     prev.css({ 
     'left': 0, 
     'top': (height/2)-150, 
     }); 
     next.css({ 
     'left': 924, 
     'top': (height/2)-150, 
     }); 
    });  
    e.preventDefault(); 
    }); 
}); 
</script> 

これはどのような作品です：

は、ここに私のJSです。ジャスパーのおかげで、彼のコードビットを変更する必要がありました：

$(function() { 
    $(document).delegate('#next', 'click', function (e) { 
     $('#img_wrapper').load($(this).attr('href') + ' #container',function() { 

      var height = $(window).height(), 
       width = $(document).width(); 

      $("#the_image").bind('load', function() { 
       var image = $('#the_image'); 
       $("#the_image").css("max-height",height-200); 
       image.css({ 
        'max-height': height-200, 
        'left': width/2 - (image.width() /2)-5, 
        'top': height/2 -(image.height() /2), 
       }); 
      }); 

      $('#previous').css({ 
       'left' : 0, 
       'top' : ((height/2) - 150), 
      }); 

      $('#next').css({ 
       'left' : 924, 
       'top' : ((height/2) - 150), 
      }); 
     }); 
     e.preventDefault(); 
    }); 
}); 

Answer 1

画像は幅と高さを得る前にロードする必要があります。あなたはそれがDOMに追加される前の画像へloadイベントハンドラを追加できるように

$(function() { 
    $(document).delegate('#previous', 'click', function (e) { 
     $('#img_wrapper').load($(this).attr('href') + ' #container',function() { 

      var height = $(window).height(), 
       width = $(document).width(); 

      //here's the fix, we wait for the image to load before changing it's dimensions 
      $("#the_image").bind('load', function (
       $(this).css({ 
        'max-height' : (height - 200), 
        'left'  : (width/2 - ($(this).width()/2) - 5), 
        'top'  : (height/2 - ($(this).height()/2)), 
       }); 
      }); 

      $('#previous').css({ 
       'left' : 0, 
       'top' : ((height/2) - 150), 
      }); 

      $('#next').css({ 
       'left' : 924, 
       'top' : ((height/2) - 150), 
      }); 
     }); 
     e.preventDefault(); 
    }); 
}); 

は、代わりに私は（それが発火する前に、あなたがloadイベントをキャプチャできることを確認するために）別のAJAX機能を使用します。

$(function() { 
    $(document).delegate('#previous', 'click', function (e) { 
     $.get($(this).attr('href'), function (serverResponse) { 

      var height = $(window).height(), 
       width = $(document).width(); 

      //here's the fix, we wait for the image to load before changing it's dimensions 
      serverResponse = $(serverResponse).find('#container'); 
      serverResponse.find('#the_image').bind('load', function (
       $(this).css({ 
        'max-height' : (height - 200), 
        'left'  : (width/2 - ($(this).width()/2) - 5), 
        'top'  : (height/2 - ($(this).height()/2)), 
       }); 
      }); 

      //add the new HTML to the DOM, `.load()` did this automatically 
      $('#img_wrapper').html(serverResponse); 

      $('#previous').css({ 
       'left' : 0, 
       'top' : ((height/2) - 150), 
      }); 

      $('#next').css({ 
       'left' : 924, 
       'top' : ((height/2) - 150), 
      }); 
     }); 
     e.preventDefault(); 
    }); 
}); 

Answer 2

これを試してみて、高さと幅を覚えているプロパティ、メソッドされていません。あなたがやろうとしている場合を除き また、変数にオブジェクトを格納していませんイベントの火災ごとに1回だけドットチェーンよりも多くの作業が可能です。ああ、私も忘れました... + "px"はIEのために本当に助けになるでしょう！

<script type="text/javascript"> 
$(document).ready(function() { 
    $('body #main #wrapper').on('click', '#previous' function(e){ 
    $('#img_wrapper').find("img").attr("src", $(this).attr('href') + ' #container'); 
     var height = $(window).height(), width = $(document).width(); 
     $('#the_image').css({ 
     'max-height': parseInt((height-200), 10)+"px",  
     'left': parseInt((width/2 - (image.width /2)-5), 10)+"px", 
     'top': parseInt((height/2 -(image.height /2)), 10)+"px", 
     }); 
     $('#previous')css({ 
     'left': 0, 
     'top': parseInt(((height/2)-150), 10)+"px", 
     }); 
     $('#next'.css({ 
     'left': 924+"px", 
     'top': parseInt(((height/2)-150), 10)+"px", 
     }); 
    });  
    e.preventDefault(); 
    }); 
}); 
</script>