0

ajax を使用して、複数の写真を含む XML ドキュメントを読み込んでいます。私の関数が通過するプロセスは次のとおりです。

UL
を開きます LI を
開きます img タグを開き
ます src を xml ドキュメント内の URL に設定します (下記参照)
img タグを
閉じます LI
を開き
ます img タグを開きます
src を xml ドキュメント内の URL に設定します (以下を参照)下)
img タグを
閉じる close LI
close UL

新しいリスト項目を作成し、xml ドキュメント内の個々のタグごとに img タグを内部に配置します。
そしてxmlはこれですが、より多くのエントリがあります:

<images><image><url>0.jpg</url></image><image><url>1.jpg</url></image></images>

そして、画像 src を扱う私の関数のスニピットは 

for (i=0;i<x.length;i++)
      {
      txt=txt + "<li>";
      xx=x[i].getElementsByTagName("url");
        {
        try
          {txt=txt + "<img class='fade' src='" + xx[0].firstChild.nodeValue + "' />";
    }
        catch (er)
          {txt=txt + "<li class='fade'><img src='images/ajax-loader.gif' /></li>";}
        }
  txt=txt + "</li>";
      }

私の質問は、ロードされた後にこれらをフェードインするにはどうすればよいですか? そして、loading.gif を後ろに追加するにはどうすればよいですか? load.gif を src としてイメージ タグを書き込み、上記の関数で各要素を id で取得して src を変更する類似の関数を考えていました。これを試してみてください。他のソリューションは大歓迎です。でも主に、このバッドボーイを弱体化させる方法を考え出す必要があります。

ありがとう

4

4 に答える 4

0 
   *Upate*

こんにちは、回答ありがとうございますが、私はまだこの問題に頭を悩ませています。基本的に、各パーツを個別に動作させることはできますが、すべてを一緒に動作させることはできません。

私が理解できない問題は次
のとおりです。loading.gif の上に画像をフェードできるようにするには、gif を背景画像にする必要があります。
画像をロードするには、ajax リクエストが必要です。画像は、ajax 経由で正常にロードされた場合にのみ、ページにロードされます。
ページをロードするには、loading.gif が必要です。つまり、ページ上に 100 個の LI の空白の構造を設定する必要があります。次に、 を LIに挿入するために
使用できます。はい? しかし、私が抱えている問題は、これを行っている間にページがフリーズし、一度に 1 つずつではなく、すべての画像を一度にロードすることです。.html()<img src=[url from xml file] />

そこで私は、各 img が onload を実行できる関数を作成し、ajax スクリプトを開始して次の画像をロードすることを考えました。
これは素晴らしいとは思いません。そして、関数の作成に問題があります。
それの理論は次のとおりです。

image0 がロードされてフェードインし、
image0 がロードを完了してアクティブ化しますloadNext()
In loadnext(): ID が増加します (0 から 100 で始まる xml の属性
です) 新しい ID に関連する URL (xml の要素) を取得し
ます順序付けされていないリストでありloadNext()、image1 onload で実行されます。

私はそれを動作させることはできません:(助けてください

于 2010-07-29T10:06:17.243 に答える
0

aviv が言うように、画像の不透明度を現在の状態から 100% にアニメーション化するdisplay: noneため、最初にを設定する必要があります。.fadeIn

そして、loading.gif はどうでしょうか。

さまざまな方法があります。たとえば、最初srcは各画像の を に設定しloading.gif、次に ajax リクエスト後に をsrc画像に変更します。この場合、display: none各 src を変更する前に設定する必要があります。

または、たとえば絶対位置を持つ他の img 要素を (読み込みとして) 持つこともできます。この場合、スタイルをdisplay: noneajax リクエスト後に変更する必要があります。

ハッピーコーディング;）

于 2010-07-29T08:15:58.407 に答える
0

パッチはdrupalでは機能しませんが、cdn モジュールはpressflowで機能します。

これを試して：

themname_template_preprocess_page(){
    //regular expression for CDN call
}
于 2013-02-21T13:12:39.690 に答える
0

次のように画像を追加します。

 style="display:none;"

そして、関数が画像の追加を終了したら、jquery フェードを呼び出します。

 $('img').fadeIn('slow');
于 2010-07-29T08:12:27.760 に答える