在加載“ body”幾秒鍾后加載“ div”？

Question

是否有一種方法可以在圖像彈出后幾秒鍾內加載“文本容器” div。 我知道我應該使用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

您要嘗試執行的操作稱為“ LazyLoading”。 目的是在制作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);