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

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 回调方法与这些计算绑定(bind)然后更改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]));