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

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

javascript html

隐藏javascript创建的div，直到呈现所有内容,javascript,html,Javascript,Html,因此，我有一个移动网页，需要从网络上获取一些内容，以一种模式显示。模式本身是通过Javascript创建的，Javascript是一个div容器，关闭时设置为display:none <body> Display this content: <button onclick="displayModal()">display</button> <script type="text/javascript"> var htm

因此，我有一个移动网页，需要从网络上获取一些内容，以一种模式显示。模式本身是通过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>


显示此内容：
显示
var htmlContents=“一些相当重的内容”；
var modal=//创建modal div元素的一些代码。
modal.style.display='none'；
函数displaymodel（）{
modal.innerHTML=htmlContents；
modal.style.display='block'；
}

然后用户单击一个按钮，然后我们用一些HTML填充div的

innerHTML

，然后将模式切换到

display:block

这里的问题是，我们添加到innerHTML的内容可能非常繁重。大量的图像和css可能需要一些时间来渲染（在旧设备上为1或2秒）。然而，它们开始一个接一个地弹出到视图中。因此，在渲染时，用户可能会看到不合适的图像和div

只有在所有内容都呈现在屏幕外后，才可以将模式切换为可见

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

我认为有几种方法可以做到这一点。我认为，如果将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>


显示此内容：
显示
var htmlContents=“一些相当重的内容”；
var modal=//创建modal div元素的一些代码。
modal.style.display='none'；
modal.innerHTML=htmlContents；
函数displaymodel（）{
modal.style.display='block'；
}

我还发现这个jQuery库可能会有所帮助，似乎很多人都在使用它：

您是否考虑过下载图像的带宽可能比渲染更大的性能瓶颈？您可以在容器中插入html，然后再执行容器。querySelectorAll（'img'）并在所有容器上附加onload事件。加载最后一幅图像后，触发显示：block；但我认为用户可能希望看到加载的内容。@Vitim.us我如何判断所有图像何时加载？@TimoSta下载图像目前不成问题。带宽可能是一个瓶颈，但无论如何都需要下载图像。因此，我只能解决我控制的部分：渲染。@roloenusa您必须实现某种计数器，用于跟踪已加载的图像数量。加载最后一个图像时，您知道这是最后一个图像，因此此时您将取消隐藏所有内容。函数块中modal.innerHTML=htmlContents的赋值没有多大关系，因为htmlContents只是一个需要几分之一毫秒赋值的字符串。不过jquery库似乎是一个不错的选择。部分要求是不使用任何外部库来处理一些矛盾。谢谢你。