Question

所以我有一个移动网页，需要从网络上获取一些内容才能以模态显示。模态本身是通过Javascript创建的，Javascript是一个div容器，在关闭时设置为display:none。

<body>

  Display this content: 
    <button onclick="displayModal()">display</button>

  <script type="text/javascript">
     var htmlContents = "<div>some pretty heavy content</div>";
     var modal = //some code to create the modal div element.
     modal.style.display = 'none';

     function displayModal() {
         modal.innerHTML = htmlContents;
         modal.style.display = 'block';
     }
  </script>

</body>

然后用户点击一个按钮，然后我们使用一些HTML填充div的innerHTML，然后将模式切换为display: block

这里的问题是我们添加到innerHTML的内容可能非常繁重。很多图像和CSS可能需要一些时间来渲染（旧设备上1或2秒）。然而，他们开始逐一弹出视图。因此，在呈现内容时，用户可能会看到图像和div不合适。

在将所有内容渲染到屏幕外后，是否有任何方法可以将模态切换为仅显示。

P.S：这是用纯javascript编写的（没有jquery或任何其他库，因为性能是一个问题）。

Answer 1

我认为有几种方法可以做到这一点。我想如果你将modal.innerHTML = htmlContents移出displayModal（）函数，你可以在用户点击它之前加载图像和模态内容。所以它看起来像这样：

<body>

  Display this content: 
    <button onclick="displayModal()">display</button>

  <script type="text/javascript">
     var htmlContents = "<div>some pretty heavy content</div>";
     var modal = //some code to create the modal div element.
     modal.style.display = 'none';
     modal.innerHTML = htmlContents;

     function displayModal() {
         modal.style.display = 'block';
     }
  </script>

</body>

我也发现这个jQuery库可能有所帮助，似乎很多人都在使用它： https://github.com/desandro/imagesloaded

隐藏javascript创建的div，直到呈现所有内容

1 个答案: