2017-02-09 9 views
0

まず、私は検索して、探していたものに近いものを見つけましたが、解決に役立つものは何も見つかりませんでした。高解像度の画像や素材を使用するプロのランディングページがあるので、ユーザーが見る前にあらかじめロードしておき、スムーズに来ます。私はそれをロードするために、以下のJavascriptを使用しています。しかし、私は現在のJavascriptが実際にそれを表示する前にIndex.HTMLをプリロードしているとは思わない。下のjavascriptはPreloader.htmlから読み込まれます。私はあまりにもそのコードを表示します。PreLoad Index.HTML from another Page - Javascript

preload.js

(function() { 

    var preload = document.getElementById("preload"); 
    var loading = 0; 
    var id = setInterval(frame, 64); 


    function frame() { 
     if(loading == 100) { 
      clearInterval(id); 

      window.open("index.html", "_self"); 
      return false; 

     } else { 
      loading = loading + 1; 
      if (loading == 90) { 
       preload.style.animation = "fadeout 1s ease"; 

      } 
     } 
    } 


})(); 

Preloader.html

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
    <link rel="stylesheet" type="text/css" href="css/style.css"/> 
    </head> 
    <body> 

     <div class="preload" id="preload"> 
      <div class="logo"> 

      </div> 
      <div class="loader-frame"> 
      <div class="loader1" id="loader1"></div> 
      <div class="loader2" id="loader2"></div> 
      </div> 

     </div> 

     <script type="text/javascript" src="js/preload.js"></script> 

    </body> 
</html> 

私はjavasciptするための完全なnoobのだとそれだけでwindow.openと実際の追跡をやっているからだとかなり確信していますindex.htmlページがプリロードされています。しかし、私はこれを確認するために何かオンラインで見つけることができませんでした。私はすべての私のpreload.jsが今、実際にプリロードされていない状態で、else文を使ってdelay.htmlを開いて遅延タイマーに入っていると考えています。

お時間をありがとう、乾杯!

答えて

0

ここでは、カウンタが100%に達したときにページを読み込み、ブラウザにページの読み込みを要求しているということです。実際、ロードする必要があるのはページそのものなので、プリロードは行われていません。それを要約する。カウンタが100に達すると

  1. ローダーページ「ロード」自体は
  2. ローダ・ページは、いくつかのアニメーション
  3. を表示し、コードが別のページに
  4. ブラウザをナビゲートするためにブラウザに要求ページを開き、ロードを開始実際のコンテンツ

あなたのページにこのコードをすべてまとめておく必要があります。あなたのウェブサイトからの読み込みのパーセンテージを知る正確な方法はありませんが、この機能:そうのようなあなたのoverlayElementを隠すために

<script> 
    window.onload = function() { 
    alert('page finished loading all images, css and js!'); 
    hideOverlay(); 
    }; 
</script> 

この機能を使用:

function hideOverlay() { 
    document.querySelector('#preload').style.display = 'none'; 
} 
+1

[OK]を、それは私が好奇心だったものです。 index.html(実際のコンテンツページ)の読み込みとそれが完全に読み込まれたときに、その間隔をスワップする方法がありますか?私は昨日オーバレイセットアップを行っていました。私はちょうどこの方法で試してやるほうがいいと思っていました。しかし、あなたが言ったように、ページ上のすべてをやっていくことは、道に行くでしょう。フィードバックありがとうございます! – SirFry