Javascript 加载页面时CSS/JS显示加载程序

Javascript 加载页面时CSS/JS显示加载程序,javascript,css,Javascript,Css,页面加载时如何显示加载程序 我认为JS函数是 onload="myFunction()" 正在工作的css加载程序:类似于以下内容: <script type="text/javascript"> $(window).load(function() { $(".hoja").fadeOut("slow"); }) </script> $(窗口)。加载(函数(){ 美元(“.hoja”)。淡出(“缓慢”); }) 在主体上添加javascript中的onloa

页面加载时如何显示加载程序

我认为JS函数是

onload="myFunction()"
正在工作的css加载程序:

类似于以下内容:

<script type="text/javascript">
$(window).load(function() {
    $(".hoja").fadeOut("slow");
})
</script>

$(窗口)。加载(函数(){
美元(“.hoja”)。淡出(“缓慢”);
})

主体
上添加javascript中的
onload
函数,该函数将执行隐藏加载程序的逻辑

//html
<body onload='hideLoader()'>
   <div id='loader' class="hoja">Loading...</div>
</body>

//js
window.hideLoader = function(){
   var loader = document.getElementById('loader');
   loader.style.display='none';
}
//html
加载。。。
//js
window.hideLoader=函数(){
var loader=document.getElementById('loader');
loader.style.display='none';
}
小提琴:

使用setTimeout来显示效果:(多亏了Moob)

试试这个

window.onload = function(){
   document.getElementsByClassName('hoja')[0].style.opacity = '0';
}

window.onload = function(){
   document.getElementsByClassName('hoja')[0].style.display = 'none';
}

工作

哇,我看你真的很努力;)如果您添加加载程序映像onload,它将仅在页面加载后显示(从而触发onload事件)。相反,您应该在默认情况下显示加载程序,并在加载DOM后将其删除。在页面加载时有一个示例,可以快速查看加载程序。也许可以将示例的hideloader部分放在
setTimeout
中,这样我们就可以看到效果了?是的,我想这么做,但是如果OP把代码直接粘贴到她的产品代码上呢。因此我没有这样做。将添加带有说明的链接