Question

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

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

由于

Answer 1

是的，这实际上非常简单。你可以用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 */
}

现在我们只需要使用Javascript添加fade类：

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 showing this effect。（显然你会以不同的方式设置.preloader。）

Answer 2

尝试这样的事情：

// 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>

Answer 3

这应该有效：

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);
}

jQuery将屏幕加载到纯JavaScript中

3 个答案: