jquery / javascript中重复/多次下载onkeyup事件

Question

if my input box contains URL (eg http://kotaku.com/some-article ) via paste() & keyup() my CURL will get the title, description and images of that particular website and then inserts this into my #content

POST- 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);
    }
});

Data being returned

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

what troubles me is during the keyup() event.

whenever i typed something after the link is pasted, it downloads the image repeatedly.

so, upon paste() event i get this amount of transactions. which is correct.

but after i type something, or anything that activates keyup() event, it download the images again. if i continue typing after the link, it keeps downloading..

this is only true to images. the title, description doesnt seem to have this issue.

so, if i remove the image div, and left the title, desc

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

it works fine.

i just get repeated downloads of images for every keyup() event. how can i prevent on doing this, or how can i properly approach troubleshooting.

note: the var content; is used to store the data being returned by CURL, and just access this on keyup() event. so i dont have to request for another $post to curl.

im sorry if my explanation is a bit vague.

Answer 1

By using $('#content').html(content); you are constantly re-inserting your image into the DOM. Depending on your browser and server settings this may or may not be getting cached.

The worst case scenario is caching does not exist, and thus your image is re-downloaded on every keyup call because $('#content').html(content); empties the #content element and then re-writes the image into it.

If caching existed, you would still get repeated calls to the image, however you would not see the aggregation of downloaded data in the network inspector tool.

Ideally your application should not be updating your document fragment images on every key press. You should find a way to target only the elements which you absolutely need updating and check your browser and server settings to ensure images can be cached correctly.