javascript - 在文档准备好图像源后使用 JQuery 居中图像

Question

我有一个问题，我认为是关于 HTML/JQuery 用法中函数的同步:

我有一个简单的 html 文件，例如

<div id="wrapperA" style="top: 50%">
    <span id="wordfortargetpic1"></span>
    <span id="wordfortargetpic2"></span>
    <span id="wordfortargetpic3"></span>
    <img id="pic1" class="imgdiv" src="" />
    </div>
  </div>

我用 JQuery 添加了 src 属性:

$("#pic1").attr("src", "mysource.png");

.imgdiv 的 CSS:

.imgdiv{
  max-width: 120px;
  height: auto;
  position: absolute;
  top: 50%;
  left: 50%;
  cursor: pointer;
}

现在由于我的图像大小可以变化，我编写了一个 JQuery 函数，通过获取元素的尺寸和调整边距来使元素居中:

function css_center(object) {
  object.css({
    "margin-left": -($(object).width() / 2),
    "margin-top": -($(object).height() / 2)
  });
}

我现在的问题是，如果我用

运行我的脚本

1. 设置源
2. 居中 img

它不起作用(即它不使图像居中)。但是，如果我在控制台中运行 css_center 函数，它确实有效。

我怀疑这与函数的运行方式有关，而我在这方面遗漏了一部分。

为了解决这个问题，我试图通过构建一个仅设置名为 getImage() 的 src 的函数来规避此问题，并使用以图像为中心的回调调用该函数，例如:

getImage(function(){
  css_center($(".imgdiv"));    
})

也不行。我在这里缺少什么？

Answer 1

确保您的函数在图像加载后运行

$('#pic1').on('load', function(){
    this.style.marginTop = -(this.height/2) + 'px';
    this.style.marginLeft = -(this.width/2) + 'px';
})