ホームページ  >  記事  >  ウェブフロントエンド  >  IE6 および IE7 で画像を動的にロードする js でエラーが表示されない_javascript スキル

IE6 および IE7 で画像を動的にロードする js でエラーが表示されない_javascript スキル

WBOY
WBOYオリジナル
2016-05-16 18:22:521156ブラウズ

まず、この奇妙なバグの背景について説明します。
ページの読み込み中に、小さなサムネイルが大量に読み込まれます。
非常に多くの小さなサムネイル ラベルがループ状に並べられており、小さな画像をクリックするとロードされますダイナミックに大きな画像を表示することは、淘宝網で商品の写真を見るのと似ています。ページにタグがあります:


順番トラフィックを節約するため、ページの読み込みを高速化するために、最初に大きな画像は読み込まれません。ユーザーが小さな画像をクリックすると、大きな画像が動的に読み込まれて表示されます。
コードをコピーします コードは次のとおりです。


function switch_image (im)
{
document.getElementById('big-image').src=im;


このメソッドはIE6、7 IE8、Firefox、Opera、chrome、Safari など、他のすべてのブラウザは正常に動作します。 。 。
IE6 と 7 の 2 つのブラウザは、サムネイルをクリックすると、ロードできる場合と半分ロードされる場合と、ロードできない場合があります。
問題は src にあると思いました。src を変更すると、IE6 と 7 が画像を正しく読み込めなくなる可能性があるため、切り替え関数を
document.getElementById('pic-box') に変更してみました。 innerHTML=' '
IE6 と 7 ではまだ動作しなかったので、画像がキャッシュされているのではないかと思い、乱数を追加しました:
document .getElementById('pic -box').innerHTML='';
IE6 と 7 はまだ動作しません。 。
そこで、innerHTML で使用されている img に問題があるのではないかと考え、appendChild に変更しました。
var img = document.createElement('img');
img.src= im;
document.getElementById('pic-box').appendChild(img);
まだ動作しません。
新しい画像を使用するように変更します:

var img = new Image();
img.src= im;
document.getElementById('pic-box').appendChild( img );
まだ動作しません。
私は困惑して、IE6 と 7 では画像を動的に読み込むことができないのかと思いました。 imgタグの問題でしょうか?
この場合、代わりに背景画像をロードしましょう。そのため、
document.getElementById('pic-box').style.background="url(" im ")";
IE6 と 7 は引き続き使用します。上記の方法は IE6 と 7 を除いてすべて正常に動作します。
Google のみをノンストップで実行すると、結果は次のようになります:
IE6 および 7 は この状況は、画像が動的に読み込まれるときに発生します。Google で見つけた説明:

満腹で何もすることができなかった外国人が繰り返しテストしたところ、この問題が IE6 の根本的なメカニズムであることがわかりました。バグは後続のバージョンで解決されました。
このように a タグを使用しても
または しても、a タグが何らかの動作を引き起こすのを妨げることはできないと言われています。
IE6 につながる 彼らは、ページが更新またはリダイレクトされ、現在の接続がすべて中断されたと誤って考えるため、新しい画像の読み込みが中止されます
もちろん、満腹で何も持っていないこれらの外国人は、

最も簡単な方法は 2 つあり、1 つは次のような a タグを使用する方法です。

実際、IE6 だけでなく IE7 にもこのバグがあることがわかりました。
では問題は解決しません。🎜>
そのため、a タグを他のタグに置き換えることをお勧めします。結局、私は怒りに任せてすべての a タグをspanに置き換えました。それ以来、この問題は一度も発生していません。再び発生しました。