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();
  });
});

奇怪的是，在OSX中的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

尝试在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%); }

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

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

2 个答案: