.load回调函数有时会起作用 - .load callback function works sometimes?

我的图像库有下一个和上一个链接，当用户点击其中一个时，它会在#the_imagediv中加载一个图像，但我每次都需要调整图像大小。我的想法是，我会把调整图像大小的代码作为.load的回调函数。但这并不是每次都有效。同样奇怪的是，如果我在image = $('#the_image');之后放一个alert("blah");，那么图像每次都会正确定位。有什么想法吗？

这是我的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>

这就是工作原理。多亏了Jasper，他不得不修改一下自己的代码：

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

在获取图像的宽度/高度之前，必须先加载图像。

$(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函数，这样您就可以在图像添加到DOM之前将load事件处理程序添加到图像中（以确保您可以在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();
    });
});

试试这个，记住高度和宽度是属性而不是方法：此外，不要将对象存储到变量中，除非您要做的工作比每次事件触发只进行一次点链接还要多。哦，我也忘了。。。+"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>