Bor*_*rsn -1 html javascript css jquery css-transitions
我有这个加载屏幕脚本,我想在项目中实现.
但是它需要jQuery.由于页面中没有任何元素需要jQuery,我想节省一些空间并避免添加它.
有什么办法可以用纯JavaScript提供完全相同的功能吗？
HTML:
<body onload="hide_preloader();">
<div class="preloader"> <div class="loader"></div> </div>
</body>
jQuery的:
jQuery(window).load(function() { rotate = 0; $(".preloader").fadeOut(250); });
谢谢
是的,这实际上非常简单.您可以使用CSS转换来淡化.
首先,让我们定义一些CSS:
.preloader {
transition: opacity 0.25s linear; /* when we change the opacity, use these transition settings */
}
.preloader.fade {
opacity: 0; /* when we add the class fade, set the opacity to 0 using the above transition */
}
现在我们只需要fade使用Javascript 添加类:
window.onload = function() {
var preloader = document.getElementsByClassName('preloader')[0];
preloader.className += ' fade';
setTimeout(function(){
preloader.style.display = 'none';
}, 300);
};
不知道浏览器transition将设置opacity以0立即,而作为一个绝对的故障安全(例如,对于不理解的浏览器opacity),我们设定display到none第二个大家之后.
jsFiddle显示这种效果.(显然你会有.preloader不同的风格.)