6

私が取り組んでいるサイトでは、javascript で実装したいくつかのコントロールを使用してアニメーション化できる一連の画像をロードします。ロックアップして回復しない IE6 を除くすべてのブラウザーですべてが正常に動作します。少なくとも15分間はそこに座らせませんでした。

窒息している部分は、特定のdivの内容を変更しようとしている部分です。

問題の前に:

<div id='animation_image'></div>

問題の後:

<div id="animation_image">  
  <div id="daily_loop_image_13" class="loop_image">
    <img name="animation" src="/path/to/image/13/20100119/world_14.gif" 
      class="hiddenElements" border="0">
    </div> 
  <div id="daily_loop_image_12" class="loop_image">
    <img name="animation" src="/path/to/image/12/20100119/world_13.gif" 
      class="hiddenElements" border="0">
  </div> 
  <div id="daily_loop_image_11" class="loop_image">
    <img name="animation" src="/path/to/image/11/20100119/world_12.gif" 
      class="hiddenElements" border="0">
  </div> 
  <div id="daily_loop_image_10" class="loop_image">
    <img name="animation" src="/path/to/image/10/20100119/world_11.gif" 
      class="hiddenElements" border="0">
  </div> 
  <div id="daily_loop_image_9" class="loop_image">
    <img name="animation" src="/path/to/image/9/20100119/world_10.gif" 
      class="hiddenElements" border="0">
  </div> 
  <div id="daily_loop_image_8" class="loop_image">
    <img name="animation" src="/path/to/image/8/20100119/world_9.gif" 
      class="hiddenElements" border="0">
  </div> 
  <div id="daily_loop_image_7" class="loop_image">
    <img name="animation" src="/path/to/image/7/20100119/world_8.gif" 
      class="hiddenElements" border="0">
  </div> 
  <div id="daily_loop_image_6" class="loop_image">
    <img name="animation" src="/path/to/image/6/20100119/world_7.gif" 
        class="hiddenElements" border="0">
  </div> 
  <div id="daily_loop_image_5" class="loop_image">
    <img name="animation" src="/path/to/image/5/20100119/world_6.gif" 
        class="hiddenElements" border="0">
  </div> 
  <div id="daily_loop_image_4" class="loop_image">
    <img name="animation" src="/path/to/image/4/20100119/world_5.gif" 
        class="hiddenElements" border="0">
  </div> 
  <div id="daily_loop_image_3" class="loop_image">
    <img name="animation" src="/path/to/image/3/20100119/world_4.gif" 
        class="hiddenElements" border="0">
  </div> 
  <div id="daily_loop_image_2" class="loop_image">
    <img name="animation" src="/path/to/image/2/20100119/world_3.gif" 
        class="hiddenElements" border="0">
  </div> 
  <div id="daily_loop_image_1" class="loop_image">
    <img name="animation" src="/path/to/image/1/20100119/world_2.gif" 
        class="hiddenElements" border="0">
  </div> 
  <div id="daily_loop_image_0" class="loop_image">
    <img name="animation" src="/path/to/image/0/20100119/world_1.gif" 
        class="" border="0">
  </div> 
  <div id="weekly_loop_image_1" class="loop_image">
    <img name="animation" src="/path/to/weeklyImage/1/20100119/world_wk2max.gif" 
        class="hiddenElements" border="0">
  </div> 
  <div id="weekly_loop_image_0" class="loop_image">
    <img name="animation" src="/path/to/weeklyImage/0/20100119/world_wk1max.gif" 
        class="hiddenElements" border="0">
  </div>
</div>

私はもう試した：

  • animation_image 内のすべての要素を文字列として保存し、それを innerHTML に設定します
  • animation_image で空の/プレースホルダー div を作成し、それらを個別に設定する
  • innerHTML の代わりに appendChild を使用する
  • 「animation_image」の下に別のdivを追加し、上記の3つの方法を使用してすべての画像/divをそこに配置します

IE6ではどれも機能しないようです-すべてのメソッドはFF3.0以降、IE7以降、Chrome 2以降などで正常に動作します。innerHTMLの前にjavascriptを終了すると問題なく動作しますが、単一のdiv (animation_image 内) を 2 番目の箇条書きの方法で削除すると、ロックされて回復しません。

私は何かを忘れたと確信していますが、私はATMを完全におかしくしています。前もって感謝します。

更新: これはサンプル XML に沿った JavaScript へのリンクです ( http://pastebin.com/m5b426a67 )

4

7 に答える 7

1

Not quite sure how I missed this in my days and days of googling but it looks like the issue is related to the AlphaImageLoader "fix" for dealing w/transparent PNGs. The article I found gets into more detail about the underlying issue:

http://blogs.cozi.com/tech/2008/03/transparent-pngs-can-deadlock-ie6.html

When I removed the entry in png_fix.css the page - in its original form - loaded flawlessly in IE6. Now I just need to go and try to convert all the (transparent) pngs to gifs which might not be a feasible solution either.

I really appreciate everyone's help and I apologize for any wild goose chases I sent people on. Thank you all VERY VERY much.

于 2010-01-26T16:02:51.960 に答える
0

以前に同様の問題があり、innerHTML メソッドにタイムアウトを設定して修正しました。
ここに当てはまるかどうかはわかりませんが、試してみてください。

于 2010-01-25T19:27:53.700 に答える
0

この問題は、私が数回見たものです。IE では、外部リソース (画像、スクリプトなど) を含むもので innerHTML プロパティを設定すると、バグが発生するようです (とにかく私には)。

いくつかの img タグを追加しています。それぞれがこの問題を引き起こす可能性があります。これが私が推奨するものです：

このhtmlを構築してinnerHTMLプロパティを設定する代わりに

var html = '<div id="daily_loop_image_4" class="loop_image">
    <img name="animation" src="/path/to/image/4/20100119/world_5.gif"
         class="hiddenElements" border="0">
</div>';
outerDiv.innerHTML = html;

次のスクリプトを実行して、html を追加します。

var div = document.createElement('div');
div.id = 'daily_loop_image_4';
div.className = 'loop_image';

var img = document.createElement('img');
img.name = 'animation';
img.src = '/path/to/image/4/20100119/world_5.gif';
img.className = 'hiddenElements';
img.border = 0; //Shouldn't this be done in css?

div.appendChild(img);
outerDiv.appendChild(div);
于 2010-01-25T20:47:08.450 に答える
0

コードを一瞥しただけなので、これを見落としている可能性がありますが、特に IE6 では、DOM Ready の後に DOM 操作を行う必要があります。これを試しましたか？

$(document).ready(function(){
 $('#animation_image').html(animHTML);
});

あなたがこれを試したなら、私はこれをさらに調べます。

于 2010-01-25T23:20:20.983 に答える
0

別のオプションは、スプライトを使用することです。バラバラな画像をすべて 1 つのファイルにまとめ、CSS 背景プロパティ (位置、繰り返しなど) を使用して大きな画像を div に適切に配置します。個々のファイルの大きさはわかりませんが、これでうまくいくかもしれません。

これを行う方法については、インターネット上に多くのリンクがありますが、ここではその 1 つを示します。

于 2010-01-19T16:38:38.353 に答える
0

他に何も機能しない場合は、try...catch ステートメントを使用して、try がキャッチされた場合に分かりやすいエラー メッセージを表示できます。

于 2010-01-26T16:15:57.873 に答える