Question

我正在使用bootstrap在我的第一个网站上工作。我正在使用javascript来垂直居中我的图像，但是我注意到有时javascript会在某些图像之前加载，所以这些图像不会居中。

HTML：

<div class="hidden-xs col-sm-3 text-center">
        <img src="../img/body/gear.png" alt="gear.png" class="scale-icon pull-center" />
</div>

JavaScript的：

<script>
function pullCenter() {
        $(this).css('margin-top', $(this).parent().parent().height()/2-$(this).height()/2);
    }
    $('.pull-center').each(pullCenter);
    $( window ).resize(function() {
        $('.pull-center').each(pullCenter);
    });
</script>

如何在执行

之前确保已加载所有图像

 $('.pull-center').each(pullCenter);

Java脚本位于html的底部。

Answer 1

我个人会在每个图像对象的加载事件上触发对齐代码。

只需为您的图片添加一个事件监听器（您可以在一个类上进行，因此不是每个图像标记都有序）。

当事件被触发时，将对象传递给对齐方法。

这样，图像的加载将激发对齐代码。

如果任何图像的对齐可能会干扰其他图像的对齐，我的意思是，如果对齐不同图像的顺序可以改变它们最终显示的方式，那么最好的选择是在之后触发代码例如，正如Aleem所述，使用jQuery的document.ready事件加载整个页面。

Answer 2

如果图像已加载或出现错误，您可以使用jQuery来调用函数：

$("<img/>")
  .on('load', function() { console.log("image loaded correctly"); })
  .on('error', function() { console.log("error loading image"); })
  .attr("src", $(originalImage).attr("src"))
;

在加载javascript之前确保已加载图像

2 个答案: