6

問題: IE バージョン 7 および 8 で、JavaScript で行われた更新された IMG SRC の変更が表示されない

下の URL にアクセスすると、その意味がわかります。左側の (3) I want a different liner の下で、スウォッチの 1 つを選択します。「アサヒシャルトリューズ」を選んだとしましょう。左側のプレビューには何も起こらないことに注意してください。しかし、先に進んで別の見本を選択すると、左側のシフトにプレビューが表示され、Asahi Chartreuse が表示されます。なので1つ後ろです。これが、「リフレッシュ」の問題であると私が信じる理由です。Chromeで問題なく動作します。

IE の場合: 他のコントロールをクリックすると、更新が行われることに注意してください。

ここでコードを確認できます: https://www.casemodo.com/test.asp

私がこれまでに試したこと:

「キャッシュなし」と言うヘッダーを追加しようとしました。

「?」をつけてみました。pngファイル名の後に乱数。

srcを変更した後、フォーカス()を画像に設定しようとしました。

src を変更した後、style.display を非表示にしてから表示するように指示してみました。

ページに非表示の (非表示ではない) テキスト入力ボックスを作成し、img src を変更した後に focus() を設定しようとしました。

window.focus() を設定してみました。

src を変更した後、アラートを設定してみました (ご覧のとおり)。

GUESS: 現在のように見えるのは、src を設定した後、画面上の別の場所を手動でクリック (フォーカス) するまで JavaScript エンジンが一時停止することです。そのため、上記で試したすべてのスクリプトに到達することさえありません。

4

6 に答える 6

8

src 属性を null に設定してから、新しい URL に設定します。

jqueryで:

var myImg = $('#myImg');
myImg.attr('src', null);
myImg.attr('src', newUrl);

ストレートjs​​で:

var myImg = document.getElementById('myImg');
myImg.src = null;
myImg.src = newUrl

これは私にとってはうまくいきました-それは私を怒らせていました!

于 2012-11-13T16:23:52.377 に答える
1

質問に対するコメント:

  • 質問にコード スニペットを含めてください。
  • javascript は onchange イベントにありましたか、それともどこにありましたか?
  • クライアント ブラウザが Google Chrome の場合、動作しますか? (まだ別の IE-image-src-bug のように聞こえます。)
  • この質問が投稿されてから、リンク先のデモンストレーション ページが変更されました。私がこれを書いているとき、スウォッチをクリックするとサブミットが発生し、別のページがロードされます。

提案:

  • を使用setTimeoutして、元の GUI イベント スレッドではなく、タイムアウト イベントが発生したときに実際の変更が行われるようにします。たとえば、元の JavaScript が

    SomeFunction();
    

    これをに変更

    setTimeout(SomeFunction, 10);
    

    (image.src = newURL;は内部で行われますSomeFunction)

于 2012-08-14T04:59:03.917 に答える
0

私は遅延読み込みの実装で作業していましたが、同様の問題に遭遇しました。何らかの理由で、コードでdata-srcset属性をsrcsetに変更した後、このページで説明されている他のアプローチを使用しても、要素はまだ新しい属性値を取得していないようです。いくつかの調査の後、遅延読み込みプラグインのバグ修正に関するgithub のこのページにたどり着きました。ここで説明されている置換オプションまたはyour_element.src=nullアプローチを使用する代わりに、次のようなものを使用するというアイデアが得られました。

your_element.setAttribute("src", your_element.getAttribute("data-srcset"));

そして、それは私のために働くことになりました。

于 2019-07-30T12:52:51.013 に答える