-1

我有这个加载屏幕脚本，我想在项目中实现。

但是它需要 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); });

谢谢

4

3 回答 3

5

是的，这实际上非常容易。您可以改为使用 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有所不同。）

于 2013-11-07T15:01:46.427 回答
1

尝试这样的事情：

// taken from http://stackoverflow.com/q/13733912/2332336
function fade(element) {
    var op = 1;  // initial opacity
    var timer = setInterval(function () {
        if (op <= 0.1){
            clearInterval(timer);
            element.style.display = 'none';
        }
        element.style.opacity = op;
        element.style.filter = 'alpha(opacity=' + op * 100 + ")";
        op -= op * 0.1;
    }, 50);
}

这个html：

<body onload="fade(document.getElementById('preloader'));">  
    <div id="preloader"> <div class="loader"></div> </div>
</body>
于 2013-11-07T14:56:51.933 回答
1

这应该有效：

window.onload = function(){
  var preloader = document.querySelector('.preloader');

  var startTime = new Date().getTime();
  function fadeOut(){
    var passedTime = new Date().getTime() - startTime;
    var opacity = Math.max(250 / (250 - passedTime), 0);
    preloader.style.opacity = opacity;
    if(opacity){
      setTimeout(fadeOut, 0);
    }
  }
  setTimeout(fadeOut, 0);
}
于 2013-11-07T14:59:46.013 回答