-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) として、すべてのユーザーに対して 1 秒後に に設定さ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 に答える