17

コンテンツが完全に読み込まれ、ユーザー/訪問者に表示されるまで、すべてのページ コンテンツ (読み込みバー/アニメーション GIF を表示する、またはテキストを読み込むなど) をプリロードすることは可能ですか? これが可能である場合は、これを達成するために従うべき指示またはリソースを教えてください. 画像プリローダーを簡単に見つけることができたので、表示される前にページ上のすべてのコンテンツをプリロードするプリロード手法を探しています。

4

6 に答える 6

18

これには Ajax を使用する必要はありません。ページのラッパー divdisplayを に設定するだけnoneです。次に、ドキュメントがロードされ blockたときに変更します。

バニラ JavaScript を使用すると、コードは次のようになります。 

<script type="text/javascript">
    function preloader() {
        document.getElementById("preloader").style.display = "none";
        document.getElementById("container").style.display = "block";
    }

    window.onload = preloader;
</script>

<style>
div#wrapper {
    display: none;
}

div#preloader {             
    top: 0; right: 10px;
    position:absolute;
    z-index:1000;
    width: 132px; height: 38px;
    background: url(path/to/preloaderBg.png) no-repeat;
    cursor: wait;
    text-shadow: 0px 1px 0px #fefefe;  //webkit                 
}
</style>

<body>
    <div id="preloader">Loading... Please Wait.</div>
    <div id="wrapper">
        <!-- page contents goes here -->
    </div>
</body>

更新、jQuery で: 

<script type="text/javascript">
    // Use $(window).load(fn) if you need to load "all" page content including images, frames, etc.
    $(document).ready(function(){ 
        $("#preloader").hide();
        $("#container").show();
    });
</script>

関連ドキュメント: Events/ ready、 Events/ load、 CSS/ css & Core/ $

于 2009-04-08T03:06:27.417 に答える
12

ページ全体が読み込まれるまでコンテンツを非表示にする方法を選択した場合は、最初に CSS で非表示にしてから JavaScript で再表示しないでください。これを行うと、JavaScript が無効になっている、または利用できないユーザーは、まったくページを取得できなくなります。代わりに、スクリプトから非表示と表示の両方を実行します。

<body>
    <script type="text/javascript">
        document.body.style.visibility= 'hidden';
        window.onload= function() { document.body.style.visibility= 'visible'; };
    </script>

また、「プリローダー」という用語は、ここで行っていることには正しくないことに注意してください。「事前」は、ページを取得してキャッシュし、必要なときにすぐに使えるようにすることで、パフォーマンスを向上させることを意味します。

しかし、実際にはこれは逆です。部分的なコンテンツが利用可能な場合、ページの読み込み中にユーザーに何も表示しないのを待つことで、パフォーマンスが低下します。プログレッシブ レンダリングを無効にすると、ブラウジングが遅くなりますが、速くはなりません。通常、これは明らかに間違いであり、いくつかのニッチなケースを除いて、通常のブラウザ プログレッシブ レンダリングを使用するのが最善です。これが Web のしくみです。人々は今ではそれに慣れています。

(つまり、Web を実際に使用したり理解したりしないが、自分の会社のサイトが一度に表示されることを要求する、頭の悪い経営者タイプを除く)。

于 2009-04-08T09:28:08.810 に答える
2

画像が完全に読み込まれたときに知る必要があることを行ったので、関数を使用してプリロードを$.get()実行し、最後のパラメーターとしてコールバック関数を渡しました。このように、画像が実際にダウンロードされたときに、コールバックが発生し、ブラウザにすでに画像がキャッシュされていることがわかります。

プリロードするように指示した画像ごとにグローバル変数をインクリメントする関数を記述してから、コールバックでカウンターをデクリメントできます。カウンターがゼロに戻ったら、別の関数を呼び出します。この関数は、すべての画像がプリロードされると起動するようになりました。

これは画像用です。$（document）.ready（）が起動されると、他のすべてがロードされることが保証されます。したがって、この時点でルーチンを開始すると、ページ上のすべてがロードされるはずです。

于 2009-04-08T02:24:41.077 に答える
2

最良の方法

関数 ajax(){
$('#wapal').html('画像へのパス');
$.ajax({
      url:'somfile.php',
         メソッド：「取得」、
         成功:関数(データ){
         場合 (データ =='') 戻ります。
         $('#wapal').html(データ);
       }
    });
}
于 2011-01-13T12:43:05.660 に答える
1

DMus -Jerad Answer にいくつかの変更を加えました。アドセンスがページにある場合は機能しません。

jqueryで簡単にできます。

脚本

$(document).ready(function() {
     $('#preloader').fadeOut('slow', function() { $(this).remove(); });
});

スタイル

div#preloader {
   position: fixed;
   z-index: 999;
   width: 100%;
   height: 100%;
   background: #c6d6c2 url(ajax-loader.gif) no-repeat center center;
 }

HTML

div id="preloader"
于 2012-06-23T13:23:07.693 に答える
1

jqueryで簡単にできます。

脚本


$(window).load(function() {
     $('#preloader').fadeOut('slow', function() { $(this).remove(); });
});

スタイル


div#preloader {
   position: fixed;
   z-index: 999;
   width: 100%;
   height: 100%;
   background: #c6d6c2 url(ajax-loader.gif) no-repeat center center;
 }

HTML 

div id="preloader"

于 2010-11-15T08:14:56.080 に答える