如何在html中逐个加载页面元素_Html

如何在html中逐个加载页面元素

html

如何在html中逐个加载页面元素,html,Html,我想在不同的时间加载页面的两个元素。以下是我的代码： <html> <body > <div style="background-image: url(im.jpg); height: 400px; width: 400px;"> <div class="test1"> test1 </div> <div class="test2"> test2 </div> </div> </body>

我想在不同的时间加载页面的两个元素。以下是我的代码：

<html>
<body >
<div style="background-image: url(im.jpg); height: 400px; width: 400px;">
<div class="test1">
test1
</div>
<div class="test2">
test2
</div>
</div>
</body>
</html>


测试1
测试2

在这里，我想先加载带有背景图像和test1文本的页面，然后再加载第二个文本test2。如何指定此加载时间？

您可以使用jquery和hide-show选项来完成此操作


点击这里
在元素最初隐藏的情况下，我们可以缓慢地显示它：
$（“#单击我”）。单击（函数（）{
$（“#book”）.show（“slow”，function（）{
//动画完成。
});
});

从一开始就隐藏元素，然后可以使用Javascript中的计时器来显示它

向元素添加一个id，以便可以从脚本中轻松找到它：

<div class="test2" id="test2">

在

标记（页面中缺少该标记，它位于

标记之前）中，可以添加隐藏元素的样式：

<style>
#test2 { display: none; }
</style>


#test2{显示：无；}

然后，您可以向

标记添加脚本，该脚本将在两秒钟后显示元素：

<script>
window.onload = function(){
  window.setTimeout(function(){
    document.getElementById('test2').style.display = 'block';
  }, 2000);
};
</script>


window.onload=函数（）{
setTimeout（函数（）{
document.getElementById（'test2'）.style.display='block'；
}, 2000);
};

这将适用于您：加载第一个图元，然后加载第二个图元

使用jQuery（确保在html中包含脚本/src） 2秒后加载第一个，4秒后加载第二个：

$( "#test1" ).hide();
$( "#test2" ).hide();

setTimeout(function(){
    $( "#test1" ).show();
}, 2000);

setTimeout(function(){
    $( "#test2" ).show();
}, 4000);

HTML：

<div id="test1" style="background: red;">
    <p>test1</p>
</div>

<div id="test2" style="background: blue;">
    <p>test2</p>
</div>

并使用

显示：无我想您需要Javascript/JQuery
$( "#test1" ).hide();
$( "#test2" ).hide();

setTimeout(function(){
    $( "#test1" ).show();
}, 2000);

setTimeout(function(){
    $( "#test2" ).show();
}, 4000);

<div id="test1" style="background: red;">
    <p>test1</p>
</div>

<div id="test2" style="background: blue;">
    <p>test2</p>
</div>

$( "#test1" ).hide();
$( "#test2" ).hide();