0

入力ボックスに URL (例: http://kotaku.com/some-article)が含まれている場合paste()& keyup()my CURL は、その特定の Web サイトのタイトル、説明、および画像を取得し、これを my に挿入します。#content

ポスト - AJAX

$("input").on({
'paste': function() {
 var content;
    if (...) {
      $.post("curlfetch.php?url="+ url, {
      }, function(response){
      content = response;
      $('#content').html(response);
},
'keyup': function() {
    if (...) {
       $('#content').html(content);
    }
});

返されるデータ

<div id="image"><img src ... /> </div>
<div id="title"> some title... </div>
<div id="desc"> some text... </div>

困っているのはkeyup()イベント中です。

リンクを貼り付けた後に何かを入力すると、画像が繰り返しダウンロードされます。

そのため、paste()イベント時にこの量のトランザクションを取得します。どちらが正しい。ここに画像の説明を入力

しかし、何かを入力した後、またはkeyup()イベントをアクティブにするものを入力すると、画像が再度ダウンロードされます。リンクの後に入力を続けると、ダウンロードが続きます..

ここに画像の説明を入力

これは画像にのみ当てはまります。タイトル、説明にこの問題はないようです。

したがって、画像の div を削除し、タイトル、desc を残した場合

 <!-- <div id="image"><img src ... /> </div> -->
    <div id="title"> some title... </div>
    <div id="desc"> some text... </div>

それは正常に動作します。

keyup()イベントごとに画像を繰り返しダウンロードするだけです。これを防ぐにはどうすればよいですか、またはトラブルシューティングに適切に取り組むにはどうすればよいですか。

注: はvar content;、CURL によって返されるデータを格納するために使用され、keyup()イベントでこれにアクセスするだけです。だから私は$postカールするために別のものを要求する必要はありません.

私の説明が少し曖昧で申し訳ありません。

4

1 に答える 1

0

を使用$('#content').html(content);すると、常に画像を DOM に再挿入することになります。ブラウザとサーバーの設定によっては、これがキャッシュされる場合とされない場合があります。

最悪のシナリオはキャッシュが存在しないことです。そのため$('#content').html(content);、要素を空にし#contentてから画像を再書き込みするため、keyup 呼び出しのたびに画像が再ダウンロードされます。

キャッシュが存在する場合でも、イメージへの呼び出しが繰り返されますが、ネットワーク インスペクター ツールでダウンロードされたデータの集約は表示されません。

理想的には、キーを押すたびにアプリケーションがドキュメント フラグメントの画像を更新しないようにする必要があります。絶対に更新する必要がある要素のみを対象とする方法を見つけ、ブラウザとサーバーの設定を確認して、画像が正しくキャッシュされるようにする必要があります。

于 2014-03-24T17:22:15.507 に答える