Question

在我的脚本中，我将数组中的图像加载到div中，然后计算一些要调整的样式元素。问题是这只有在我计算样式之前使用超时函数时才有效，如下所示：

  $('#forecastImg').attr('src',get_ImageItemLocation(imageArray[0]));

  setTimeout(function(){ 
       var himg= $("#forecastImg").height();
       var hest = $("#esterno").height();
       var margin= ((hest-himg)/2)-$(".header").height()-$(".forecastdate").height();
       if (margin>0){
         $("#forecastImg").css('margin-top',(margin+'px'));
      }
  },240);

如何摆脱超时并确保height()值正确？如果我删除超时，我会得到height()=0值。

Answer 1

这里的问题是，当您尝试计算边距时未加载图像，这就是当您尝试立即进行计算时$('#forecastImg').height()未返回预期高度的原因（在您的情况下，您正在等待加载 setTimeout ）

但是，您可以使用$().load方法而不是不可靠的setTimeout来在加载图像后始终如一地运行计算。要做到这一点，您必须首先将.load回调方法与那些计算绑定，然后更改它的src值，否则图像可能会立即加载而不调用我们的.load回调：

  $('#forecastImg')
      .one('load', function () { 
           var himg = $("#forecastImg").height(),
               hest = $("#esterno").height(),
               margin = ((hest-himg) / 2) - $(".header").height() - $(".forecastdate").height();

           if (margin > 0) {
               $("#forecastImg").css('margin-top',(margin+'px'));
           }
      })
      .attr('src', get_ImageItemLocation(imageArray[0]));

Answer 2

您需要等待图片已加载，因此超时是正确的，但如果您想使用其他解决方案，则可以改为使用load事件：

$("#forecastImg").one("load", function() {
       var himg= $(this).height();
       var hest = $("#esterno").height();
       var margin= ((hest-himg)/2)-$(".header").height()-$(".forecastdate").height();
       if (margin>0){
         $("#forecastImg").css('margin-top',(margin+'px'));
      }
});

Answer 3

尝试JQuery的load事件

$('#forecastImg').load(function() {
   var himg = $("#forecastImg").height();
   var hest = $("#esterno").height();
   var margin = ((hest-himg)/2)-$(".header").height()-$(".forecastdate").height();
    if (margin > 0) {
        $("#forecastImg").css('margin-top',(margin+'px'));
    }
});

仅在完成渲染图像时计算div样式

3 个答案: