Css 要在页面加载时禁用透明div&；页面加载后显示

您好，我已经编写了一个透明div的代码，我正在使用网站主页的一些文本（消息）的背面来显示更明亮的文本：

#transdiv {
 position:absolute;
top:228px;
width:852px;
height:160px;
background-color:rgba(0,0,0,.3);
border-radius:8px;

} &我在主页中使用的代码如下：

<div id="spotlight" class="pagewidth">
    <div id="find-mentor">
       <div id="transdiv">

                 <h1><?php echo Configure::read('SearchBarHeading');?></h1>
        <h2><?php echo Configure::read('SearchBarSubheading');?></h2>
        <div id="text-box">

但现在我的问题是，我希望这个div应该在主页上加载其他内容后上载，但问题是它在某个时候首先在页面上上载，这看起来非常糟糕，所以我需要修复这个问题&使它在页面的所有其他内容加载后加载。

---

谢谢

Java脚本是我唯一相信的方法。 只需在文档准备就绪（dom已完全加载）时向元素添加另一个类即可。此类将使元素可见。可见性而非显示用于使图元在显示之前获取其空间事件

这是小提琴：

下面是JS代码：

window.onload=function(){
    addClass(document.getElementById('transdiv'),'shown');
};

/*  functions handling classes in js */
function hasClass(el, name) {
   return new RegExp('(\\s|^)'+name+'(\\s|$)').test(el.className);
}
function addClass(el, name){
   if (!hasClass(el, name)) { el.className += (el.className ? ' ' : '') +name; }
}
function removeClass(el, name){
   if (hasClass(el, name)) {
       el.className=el.className.replace(new RegExp('(\\s|^)'+name+'(\\s|$)'),' ').replace(/^\s+|\s+$/g, '');
   }
}

---

使用

JavaScript

并保持

div

初始隐藏，并在页面加载事件中使用

JS

code显示它。