0

如果我的输入框包含 URL（例如http://kotaku.com/some-article） via paste()&keyup()我的 CURL 将获取该特定网站的标题、描述和图像，然后将其插入到我的#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 中。根据您的浏览器和服务器设置，这可能会或可能不会被缓存。

最坏的情况是缓存不存在，因此您的图像会在每次 keyup 调用时重新下载，因为$('#content').html(content);清空#content元素然后将图像重新写入其中。

如果存在缓存，您仍然会重复调用图像，但是您不会在网络检查器工具中看到下载数据的聚合。

理想情况下，您的应用程序不应在每次按键时更新您的文档片段图像。您应该找到一种仅针对绝对需要更新的元素的方法，并检查您的浏览器和服务器设置以确保可以正确缓存图像。

于 2014-03-24T17:22:15.507 回答