Question

有没有办法加载＆＃34;文本容器＆＃34;在图像弹出后几秒钟。我知道我应该用javascript做，我已经尝试过这段代码

<script>
window.onload = function(){

var timer = setTimeout("showText()",7000)
}
function showText(){
document.getElementByClass("text-container").style.visibility = "visible";
}
</script>

将文本容器保留为隐藏状态：style="visibility:hidden;"

<div class="notification-container">
  <div class="image-container">
      <img class="image" src="{image}" />

  </div>

  <div class="text-container">
    <div class="title">
      <span class='keyword name'>{name}</span>
    </div>

  </div>

</div>

如果您需要额外信息，请告诉我们！

Answer 1

您尝试做的事情称为＆＃34; LazyLoading＆＃34;。目的是在制作DOM之后动态加载图像，脚本或任何文件，以使页面加载速度更快。

它们是javascript中的许多插件和库，可以实现此目的，例如jQuery Lazy

使用它通常非常简单，你只需要遵循文档，如果你不擅长JS，没有问题，它几乎只能复制/粘贴代码来制作它跑了！

Answer 2

如果可以帮助您，可以使用CSS进行转换。

或者，最好的方法是使用Javascript。

使用javascript应该不是很难，我认为最可能的错误是你没有正确附加你的JS文件或一些拼写错误。

在Js中，只有这么多代码才能启用它。

//Declare timeout function 
//Add class you wanna add or remove (you can set CSS accordingly)
//Give timer (in milliseconds)

setTimeout(function(){ /
 document.getElementById('footer').classList.remove('hide');
}, 5000);

Answer 3

您可以使用jQuery以毫秒为单位对元素应用延迟

$( "document" ).ready(function() {
$( ".notification-container" ).fadeIn( 400 );
$( ".text-container" ).fadeIn( 400 ).delay( 500 ) ;
});

Answer 4

setTimeout(function(){
    document.getElementByClass("text-container").style.display="initial";
},7000);

加载＆＃39; div＆＃39;在＆＃39; body＆＃39;之后几秒钟加载？

4 个答案: