我有一个问题,我认为是关于 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)
});
}
我现在的问题是,如果我用
运行我的脚本- 设置
源
- 居中
img
它不起作用(即它不使图像居中)。 但是,如果我在控制台中运行 css_center 函数,它确实有效。
我怀疑这与函数的运行方式有关,而我在这方面遗漏了一部分。
为了解决这个问题,我试图通过构建一个仅设置名为 getImage()
的 src 的函数来规避此问题,并使用以图像为中心的回调调用该函数,例如:
getImage(function(){
css_center($(".imgdiv"));
})
也不行。我在这里缺少什么?
最佳答案
确保您的函数在图像加载后运行
$('#pic1').on('load', function(){
this.style.marginTop = -(this.height/2) + 'px';
this.style.marginLeft = -(this.width/2) + 'px';
})
关于javascript - 在文档准备好图像源后使用 JQuery 居中图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31632348/