.load回調函數有時有效嗎？

Question

我的圖片庫有下一個和上一個鏈接，當用戶單擊其中一個時，它會在#the_image div中加載圖像，但我需要每次調整圖像大小。我想我會把代碼調整爲.load的回調函數。但它不是每次都有效。奇怪的是，如果我在image = $('#the_image');之後插入alert("blah");，則圖像get每次都會正確定位。有任何想法嗎？

這裏是我的JS：

<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> 

這是什麼工作。由於碧玉，不得不修改自己的代碼位：

$(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

圖像必須先加載，然後才能得到它的寬度/高度。

$(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(); 
    }); 
}); 

或者我會用不同的AJAX功能，這樣你就可以在load事件處理程序添加到之前它被添加到DOM中的圖像（以確保您可以捕獲load事件是觸發前）：

$(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

試試這個，記得高度和寬度的屬性而不是方法： 另外，不要對象存儲到變量，除非你打算怎麼辦每次事件觸發只有一次點擊鏈接的工作量只有一次。哦，我也忘了... +「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>