jquery .css() 命令将样式插入到 DOM 中，但在页面调整大小之前不会生效

Question

我有一个脚本，它在加载和调整大小时将元素居中：

function centerMe() {
  $('.centerme').each(function(){
    var imgw = $(this).width();
    $(this).css('margin-left', '-'+imgw/2+'px');
  });
}
$(document).ready(function(){
  centerMe();
  $(window).resize(function(){
      centerMe();
  });
});

奇怪的是，在操作系统中的Chrome和Firefox上，这个功能起作用，也不起作用。尽管它将样式加载到DOM中，但浏览器在调整浏览器大小或刷新页面之前不会使其生效。

是什么原因造成的？

编辑：这修复了问题，但创建了一个更大的问题：

function centerMe() {
  $('.centerme').each(function(){
    $(this).load(function(){
      var imgw = $(this).width();
      $(this).css('margin-left', '-'+imgw/2+'px');
    });
  });
}
centerMe();
$(window).resize(function(){   
    centerMe();
});

现在，该函数在加载时正确地将图像居中，但在调整大小时无法重新计算：（

Answer 1

尝试将resize监听器置于DOM之外，并为其添加一个触发器。

$(window).resize(function(){   
    // code here
}).trigger('resize');

另外，请尝试$(window).load而不是文档就绪。DOM可能还没有图像宽度数据。

$(window).load(function(){   
    centerMe();
})

Answer 2

它不起作用，因为$(document).ready不等待图像加载。因此，当您执行var imgw = $(this).width();时，图像并不总是完成加载，imgw可能是0或undefined。

您可以使用$(window).load。

但是也许您根本不需要jQuery！考虑到你希望你的3张图像是全高和水平居中，只需使用：

section.top .feature img { transform: translateX(-50%); }

它会将您的图像向左移动其宽度的一半。