Question

在过去的几个月里，我目睹了一个奇怪的现象，Chrome加载了一个网页，直到我开始滚动才显示任何内容。起初我认为这是网站的一个问题，然后是最新版Chrome的一个小故障，但现在我认为它与jquery和rtl之间的一些冲突有关。以下示例显示空白页面，直到我开始滚动：

<!doctype html>
<html dir="rtl">
  <body>
    <h1>Blank screen test</h1>
    <div style="padding: 50%; background-color: orange;">Hey</div>
    <script src="https://code.jquery.com/jquery-1.11.1.js"></script>
  </body>
</html>

这并不总是会发生，但它在我的机器上非常一致（例如，约70％的刷新）。确保开发人员工具已关闭 - 出于某种原因，它们在打开时不会发生。

删除dir="rtl"会阻止这种情况发生。

删除<script src="https://code.jquery.com/jquery-1.11.1.js"></script>也可以防止这种情况发生。

不知道该怎么做。有没有人看到这种情况发生？任何想法如何解决这个问题？

（顺便说一下，我在Mac OS 10.12.5上使用的是Chrome 58.0.3029.110（64位））

Here is a link to an example page

Here is how it looks before I start scrolling和here is how it looks the instance scrolling starts。

Answer 1

不幸的是，我最好的猜测是，在加载时，direction属性可能会破坏jQuery的遍历功能。可能会在this repo search中提供一些提示。

一种解决方法是在加载页面后设置属性或css规则：

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html">
    <script type="text/javascript">
        window.onload = function() {
            document.documentElement.dir = 'rtl';
            // or
            document.documentElement.style.direction = 'rtl';
        }
    </script>
</head>

<body>
    <h1>Blank screen test</h1>
    <div style="padding: 50%; background-color: orange;">Hey</div>
    <script src="./blanktest_files/jquery-1.11.1.js"></script>
</body>

</html>

Answer 2

在内容展示方面，CSS dir可以覆盖属性direction: rtl;：

由于文本的方向性在语义上相关，我建议你在加载jQuery时在Javascript中添加dir='rtl'。这样，dir在页面加载时不会干扰jQuery。

<html>
  <body>
    <h1>Blank screen test</h1>
    <div style="padding: 50%; background-color: orange;">Hey</div>
    <script src="https://code.jquery.com/jquery-1.11.1.js"></script>
    <script type="text/javascript">
      $(document).ready(function() { $('html').attr('dir', 'rtl'); });
    </script>
  </body>
</html>

Answer 3

使用async属性解决了我的问题（不像在最后放置script时还有很多东西需要解析）。

所以替换

<script src="https://code.jquery.com/jquery-1.11.1.js"></script>

与

<script src="https://code.jquery.com/jquery-1.11.1.js" async></script>

Answer 4

在onload中插入代码：

<body onload="document.body.setAttribute('dir', 'rtl')">

dir属性可以在其他元素中使用。例：

<h1 dir="tld">TESTE</h1>

带有jquery和dir = rtl的Html页面在chrome

4 个答案: