9

私のウェブサイトにギャラリーがあります。ギャラリーには15枚の画像があり、それぞれが約500KB（合計サイズは7.5MB）です。

ギャラリーの読み込みには時間がかかるため（コンピューターでは25秒、接続によって異なります）、訪問者にギャラリーが読み込まれていることを知らせて、AjaxがGIFを読み込んでいることを知らせたいと思います。

ギャラリーの画像がダウンロードされて表示できるようになるまで、訪問者がギャラリーページに入るとすぐに読み込み中のGIFを表示するようにします。

私の目標を達成するために、これは私がしたことです：

これは、ギャラリーのHTMLページの本文の始まりです。

<body>
    <img src="images/ajax-loader.gif" alt="" class="hiddenPic" /> 
    <!-- loading Ajax loading GIF before all the other images -->

そしてこれはギャラリーCSSの部分です：

#gallery {
  background: url(images/ajax-loader.gif);
  background-repeat:no-repeat;
  background-attachment: fixed;
  background-position: center;

したがって、基本的に、読み込み中のGIFは、訪問者がギャラリーページに入るとすぐにダウンロードする必要があります。これは、読み込み中のGIFがダウンロードされる最初のオブジェクトであるため<body>です。ただし、hiddenPicクラスのため表示されません。

この方法は、すべてのギャラリー画像がダウンロードされてギャラリーの準備ができるまで、読み込み中のGIFを準備して、ギャラリーの背景としてできるだけ早く表示できるようにするのに役立ちます。

ただし、GIFの読み込みはGoogleChromeでは正しく機能しません。FirefoxとIEでは問題なく動作します（完璧に回転します）が、Chromeでは表示された瞬間からギャラリーの準備ができるまでスタックします（正しく回転しません）。

更新：ギャラリーページに入るときにユーザーが必要とするリソースが少ない、より良いギャラリー（コメントで提案されているものなど）を実装できることはわかっていますが、これが問題の原因となる可能性があるのはわかりません。 GIFローダーはFirefoxとIEで完全に機能します。

Ajaxの読み込みGIFがChromeで正しく機能しないのはなぜですか？

4

6 に答える 6

5

行602でこの宣言を削除する必要があります。

background-attachment: fixed;
于 2012-08-21T22:55:20.170 に答える
3

私も同じ問題を抱えていました。私が修正した方法は、読み込み中のgifを独自の要素に配置することでした（マークアップをクリーンに保つには、疑似要素を使用します）。

これで、background-attachmentルールを使用する代わりに、position：fixedを使用できます。使用する必要のあるコードは次のとおりです（ローダーgifを画面の真ん中に配置することを想定しています）。

#gallery:after {
    content: "";
    background: url(images/ajax-loader.gif);
    position: fixed;
    top: 50%;
    left: 50%;
    width: 50px; /*change to the width of your image*/
    height: 50px; /*change to the height of your image*/
    margin-left: -25px; /*Make this 1/2 the width of your image */
    margin-top: -25px; /*Make this 1/2 the height of your image */
}

お役に立てれば！

于 2013-06-20T18:35:36.280 に答える
1

私は、このような状況や同様の状況で、エンコードされた画像でdataURIを使用することを強く支持しています。これにより、スピナーgifを取得するための個別のhttpリクエストが実質的に不要になります。つまり、「読み込み中」のアニメーションをすぐにレンダリングできるようになります。これにより、UXの改善の価値は、オーバーヘッドが2キロバイト増えるよりもはるかに価値があります。特に、スタイルシートは1回だけダウンロードされてから、クライアントによってキャッシュされるためです。base64

このフィドルには、 ajaxload.infoから埋め込まれたアニメーションがあり、最終的なCSSに文字通り1KB未満しか追加されていません。

この種のリソースの埋め込みはIE7ではまったくサポートされていないことに注意してください（ただし、IE7ユーザーは対処するのにはるかに大きな懸念があります:)

于 2012-08-20T05:33:50.803 に答える
0

jQuery BlockUIプラグイン（v2）を使用してこれを試すことができます

お役に立てれば。

于 2012-08-19T07:24:13.060 に答える
0

個人的にローダーのために私はいつもこのようにそれをしました、私はそれをどこで読んだか覚えていません..しかしそれはいつも私のために働きました..

$（function（）{

$（'＃overlay'）
    。隠れる（）  
    .ajaxStart（function（）{
        $（this）.css（ "display"、 "inline"）;
        }）
    .ajaxStop（function（）{
        $（this）.hide（）;
        }）;
}）;

それが行うことは、IDを持つdivを取得し、overlay送信されるAJAXリクエストでそれを表示し、ajaxリクエストが完了すると非表示にします。

さらにコードが必要な場合はお知らせください。

乾杯。

于 2012-08-20T14:45:25.940 に答える
-1

#galleryのCSSで

    background-position: center;

する必要があります

    background-position: center center;

また、jQueryの使用を試みる必要があります。例については、http： //yulounge.alienworkers.com/photogallery/を参照してください。

于 2012-08-19T08:29:35.957 に答える