Question

我有一个网站，其中一些LayerSlider元素保持不可见，直到

调整窗口大小
我在Chrome中停用了书签栏（whaaat？）
我启用了Chrome调试工具

问题也出现在OS X上的Firefox和Safari中（所有版本均为最新版本）。

我不知道那可能是什么。对我来说，它看起来像是一些OS渲染问题。

我正在寻找解决方法。

如何在取消隐藏这些元素的页面加载后触发某种重绘？（例如，当我打开开发控制台时会发生同样的情况）

我尝试了jQuery(document.body).hide().show();，但这不起作用。

还有更多信息：

图像被隐藏，因为它被缩放到零高度并且在初始加载之后

<img src="http://www.example.com/wp-content/uploads/2016/09/example.png" class="ls-bg" alt="alpha_video" style="padding: 0px; border-width: 0px; width: 0px; height: 0px; margin-left: 765.5px; margin-top: 299px;">

调整窗口大小后，该元素的图像大小突然改变（某种动态HTML操作）

<img src="http://www.example.com/wp-content/uploads/2016/09/example.png" class="ls-bg" alt="alpha_video" style="padding: 0px; border-width: 0px; width: 1508px; height: 612.625px; margin-left: 0px; margin-top: -11.8125px;">

如何调整大小？为什么不在初始加载后发生？我怎么能触发它？

Answer 1

如何在取消隐藏的页面加载后触发某种重绘那些元素？

function afterload(callback) {
  if (document.readyState === 'complete') {
    callback();
  } else {
    jQuery(window).on('load', callback);
  }
}

afterload(function () {
  jQuery(window).trigger('resize');
});

Answer 2

过去我很幸运：

u, evv.w.1, evv.w.3, evv.w.2.i.l, evv.w.2.i.c, evv.w.2.i.p, evv.w.2.i.y, evv.w.2.i.z

和/或旧IE：

-webkit-transform: translate3d(0,0,0);

如果你分享更多信息，可能会更多地确定它。

Answer 3

在Michael Sparks的帮助下，我创建了这个解决方案。它可以放在页眉，正文或页脚的任何位置。它将在整个页面加载后执行，以确保所有元素都得到修复。

<script type="text/javascript">
jQuery( window ).load(function(){
    jQuery( window ).trigger( 'resize' );
});</script>

元素不可见，直到开发者控制台打开

3 个答案: