所以我有一个移动网页需要从网络中获取一些内容以模式显示。模式本身是通过 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 或任何其他库，因为性能是一个问题)。
最佳答案
我认为有几种方法可以做到这一点。我认为如果您将 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 - 隐藏 javascript 创建的 div，直到呈现所有内容，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38386493/