0

クライアントはページ ローダーを要求しました。これは、訪問者にコンテンツが進行中であることを知らせる「魅力的な」ものです。これは、標準の html コンテンツ (テキスト、画像など) 用です。

ウェブでいくつか見たことがありますが、それらの多くは時代遅れで、かなり不格好です。実装するのが面倒ではなく、それでもまともに見えるものを探しています。

前もって感謝します。

4

2 に答える 2

0

独自に構築することは難しくありません。アニメーション GIF を表示し、AJAX を使用してそのページをロードするページを作成できます。「AJAX 読み込み中の画像」などで検索するだけで、すばらしい読み込み GIF を取得できます。これは簡単に思えるかもしれませんが、jQuery と PHP を使用しているのであれば、それほど難しくはないように思えます。

例 test1.htm と test2.htm の 2 つのファイルがあるとします。test2 (読み込みに少し時間がかかる) のコンテンツを test1 (ページの一部をすばやく読み込む必要があります) に表示したいとします。これが私が作成した2つのファイルです（これはjQueryを使用しています）：

test1.htm 

 <head>
    <script language="javascript" type="text/javascript" src="jquery-1.3.2.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $.get('test2.htm', function(data) {
                $('#Content').html(data);
            });
        });    
    </script>
</head>
<body>
    <div id="Content" >
        <img src="ajax-loader-image.gif" />
    </div>
</body>
</html>

test2.htm

<h2>Dynamically Loaded Content</h2>
<p>Hello World!</p>

したがって、これはあなたがやろうとしていることでうまくいくはずです。重要なことは、ページを読み込みの速い部分と読み込みの遅い部分に分割することです。

于 2010-03-18T19:41:33.430 に答える
0

魅力的なローダーを作成したい場合は、素敵なアニメーション画像を使用する必要があります。ただし、アニメーション画像と jQuery の組み合わせを使用することをお勧めします。jQuery では利用可能なアニメーションがたくさんあるからです。詳細については、次のリンクをチェックアウトできます。 jQuery Animation API ローダーの追加方法

あなたのHTMLのような -

<div class="loader"></div>

あなたのCSSのような

.loader {
    position: absolute;
   margin: 0 auto;
   z-index: 9999;
   background: url('icon-loader.gif') no-repeat;
   top: 50 px;
  cursor: wait;
}

次のようなあなたのJavaScriptコード -

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
     $(window).load(function(){
        $('div.loading').fadeOut(1000);
    });
</script>
于 2013-09-01T06:56:43.847 に答える