Question

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

<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>

在这里，我想首先加载带有背景图像和test1文本的页面，然后片刻之后我想加载第二个文本test2.How我可以指定这个加载时间吗？

Answer 1

您可以使用隐藏显示选项http://api.jquery.com/show/

通过jquery执行此操作

<div id="clickme">
  Click here
</div>
<img id="book" src="book.png" alt="" width="100" height="123">
With the element initially hidden, we can show it slowly:
$( "#clickme" ).click(function() {
  $( "#book" ).show( "slow", function() {
    // Animation complete.
  });
});

Answer 2

http://jsfiddle.net/q2VJ4/

@keyframes dropHeader {
  0%   { opacity: 0; }
  99%   { opacity: 0; }
  100% { opacity: 1; }
}

@-webkit-keyframes dropHeader {
  0%   { opacity: 0; }
  99%   { opacity: 0; }
  100% { opacity: 1; }
}

.test2 {
  -moz-animation-name: dropHeader;
-moz-animation-iteration-count: 1;
-moz-animation-timing-function: ease-in;
-moz-animation-duration: 3s;

-webkit-animation-name: dropHeader;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: ease-in;
-webkit-animation-duration: 3s;

animation-name: dropHeader;
animation-iteration-count: 1;
animation-timing-function: ease-in;
animation-duration: 3s;
}

Answer 3

使元素从开始隐藏，然后您可以在Javascript中使用计时器来显示它。

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

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

在<head>标记中（页面中缺少标记，它位于<body>标记之前），您可以添加隐藏元素的样式：

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

然后你可以在<head>标签上添加一个脚本，该标签将在两秒后显示该元素：

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

Answer 4

这对你有用：加载第一个元素，然后加载第二个元素。

http://jsfiddle.net/azRwq/2/

使用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>

另一种选择是删除删除：

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

并在css中为每个元素使用display:none;

如何在html中一个接一个地加载页面元素

4 个答案: