6

したがって、このコード機能自体に問題はありません。私はこのようなものを持っています：

<div>
    <div><img id="imageToChange" src="/path/image.png" /></div>
    <div id="textToChange">Text</div>
</div>

コードの別の部分があり、jQueryを使用して画像のsrc/textを変更します。

function changeImage() {
    $('#imageToChange').prop('src', '/path/image2.png');
    $('#textToChange').html('New Text');
}

ご想像のとおり、これは私が期待するとおりに機能します。しかし、1つの癖があります。

すべてのメインブラウザ（chrome / FF / IE）。画像の変更には時間がかかります。

たとえば、changeImage（）を呼び出すと、テキストはすぐに変更されますが、画像は1〜2秒後まで変更されない場合があります。（一気に大きな画像ではなく、約6KB、ローカル）

本当に不満を言っている人は他にいませんが、画像のsrcの変更を高速化する方法があるかどうか疑問に思っています。おそらくそれを行うためのより良い方法ですか？

これもjquery1.8.0です。

ありがとう

4

6 に答える 6

5

私は以前にこの振る舞いを見たことがあります。遅延は、画像がキャッシュされていないことと、それに続く読み込み時間によって発生します。私が知っている唯一の解決策：

  1. JavaScriptImageオブジェクトを使用して画像をプリロードします。
  2. 画像の読み込みイベントを処理し、画像が読み込まれた後にテキストを更新します。jQueryには、注意すべきいくつかの問題がリストされていることに注意してください。

画像で使用する場合のロードイベントの警告

開発者が.load（）ショートカットを使用して解決しようとする一般的な課題は、画像（または画像のコレクション）が完全に読み込まれたときに関数を実行することです。これには、注意すべきいくつかの既知の警告があります。これらは：

  • 一貫して動作せず、クロスブラウザでも確実に動作しません
  • 画像のsrcが以前と同じsrcに設定されている場合、WebKitでは正しく起動しません
  • DOMツリーを正しくバブルアップしません
  • ブラウザのキャッシュにすでに存在する画像の起動を停止できます

http://api.jquery.com/load-event/

于 2012-10-04T16:39:28.357 に答える
5

jquery.attr関数を使用して属性を変更してみてください。正しく思い出せばsrc、画像のタグはプロパティではなく属性です。とは比較的同じ機能.propを.attr果たしますが、ブラウザ間で一貫した動作を保証するために、.attr代わりにタグを使用することをお勧めします。

$('#imageToChange').attr('src', '/path/image2.png');

遅延に関する限り、これは画像のサイズが原因である可能性があります。ブラウザは、画像のGETリクエストをサーバーに送信してから、それを使用してDOMをペイントする必要があります。画像が大きい場合、コードがソースを変更してから新しい画像がDOMに適切に書き込まれるまでに時間がかかる可能性があります。画像が大きい場合は、画像を縮小するか、Webで使用できるように最適化することを検討してください。

お役に立てれば。

于 2012-10-04T16:43:50.050 に答える
3

JavascriptImageオブジェクトを使用して画像をプリロードできます。

ドキュメントの先頭に

<script type="text/javascript">
   img2 = new Image();
   img2.src = "/path/image2.png";
</script>
于 2012-10-04T16:41:10.773 に答える
2

画像の読み込み時間である可能性があります。この場合、最初に画像をロードするのが遅い唯一の方法です。画像を別のものに変更した後のフォローアップの読み込みは高速です。

 $('#imageToChange').prop('src', '/path/image1.png');
 //slow, need to fetch image
 $('#imageToChange').prop('src', '/path/image2.png');
 //slow, need to fetch image
 $('#imageToChange').prop('src', '/path/image1.png');
 //fast, it already has this image

解決策として、画像をプリロードしてみることができます。または、さらに良いことに、cssスプライトを使用します。

于 2012-10-04T16:37:30.570 に答える
2

画像のsrcを変更すると、別の画像ファイルがフェッチされます。新しい画像に対してHTTPリクエストを行うため、表示する前に読み込む必要があります。これでいいの？

ところで、このため、jsを使用してイメージをプリロードできます。追加する

<img src="path/to/image.jpg" style="display: none" />

HTMLまたはJSを使用して

var im = new Image(1,1);
im.src = "path/to/image.jpg";

このようにして、画像がキャッシュされます

于 2012-10-04T16:39:18.777 に答える
2

それはネットワークの遅延です。これを試して：

<div>
    <div><img id="imageToChange" src="/path/image.png" /></div>
    <div id="textToChange">Text</div>
</div>
<img src='/path/image2.png' style='display:none'>
于 2012-10-04T16:40:39.263 に答える