div 加载完成,css加载完成才显示：代码示例

当我们在网页中使用div元素时，有时候希望在div加载完成并且相关的CSS样式也加载完成后才显示div内容。为了实现这个效果，我们可以使用JavaScript来控制div的显示。

我们可以给div元素设置一个初始的样式，比如设置display属性为none，这样在页面加载时，div会被隐藏起来。然后，我们可以使用JavaScript监听页面的加载事件，当页面加载完成后，再将div的display属性设置为block，这样就可以将div显示出来了。

下面是示例代码：

HTML代码：

<div id="myDiv" style="display: none;">
  这是一个示例div
</div>

JavaScript代码：

window.addEventListener("load", function() {
  var myDiv = document.getElementById("myDiv");
  myDiv.style.display = "block";
});

在上面的代码中，我们给div元素设置了一个id为"myDiv"，并且初始的display属性为none，即隐藏状态。然后，在JavaScript代码中，我们使用addEventListener方法来监听页面的load事件，当页面加载完成后，会执行回调函数中的代码。在回调函数中，我们通过getElementById方法获取到div元素，并将其display属性设置为block，即显示状态。

这样，当页面加载完成后，div元素就会显示出来了。通过这种方式，我们可以控制div的显示时间，保证在div加载完成并且相关的CSS样式也加载完成后才显示div内容。