Question

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

这是我的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();
    });
});

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>

.load回调函数有时会起作用吗？

2 个答案: