在第二次追加时停止图像加载答案

【问题标题】：Stop Image load on append 2nd time在第二次追加时停止图像加载
【发布时间】：2015-05-26 15:42:57
【问题描述】：

我正在开发一个聊天应用程序，它会附加如下数据

   $(selector).append("<img src='image.php?id=username'><div id ='msg'>hi</div>");

所以每次添加相同的图像时，它都会一次又一次地请求图像 URL。

如何在 append 时停止图像刷新，如果图像 url 已经加载，我希望它加载该图像缓存。

【问题讨论】：

如果您向页面添加了一个 img 标签，并且该完全相同的图片 src 已经是页面的一部分，我希望新的图片标签会成为缓存命中并且不会再次下载图片。您是否使用浏览器开发工具来确定每次（或不）都在下载图像？
yupe 每次发送 http 请求以加载相同的图像 url....它是一个聊天应用程序。您不能指望应用程序在 html 正文中预加载所有用户图像...
您确定发送了http请求吗？也许它来自缓存，不是吗？
我很确定.. 请求已发送prntscr.com/6kcyb0，我使用实时 http 标头和 chrome 开发工具...是因为图像是通过 php 加载的吗？例如：domain.com/thumb.php?id=img
这可能是相关的。比较从服务器文件系统加载的基本图像请求的标头与 thumb.php 请求。如果您在数据库中动态查找图像，则可能需要手动在 PHP 文件中编写正确的缓存响应标头。

标签： javascript php jquery caching

【解决方案1】：

您可以克隆已经存在的元素。这样，所有数据和图像数据都被保留，不需要重新获取。此外，这种方法比通过字符串添加新 HTML 快无数倍。

function startthefun() {
    var imgElem = document.createElement('img');
    imgElem.setAttribute('src','http://cdn.sstatic.net/stackoverflow/img/sprites.svg?v=1bc6a0c03b68');
    document.getElementById('content').appendChild(imgElem);
    window.timer = window.setInterval(function() {document.body.appendChild(imgElem.cloneNode());},1000);
    }

&lt;input type="button" value="start" onclick="startthefun()"&gt;&lt;input type="button" onclick="window.clearInterval(window.timer)" value="stahp"&gt;&lt;div id="content"&gt;&lt;/div&gt;

您只需将 HTMLElement 输入$(selector).append(HTMLElement) 即可，Jquery 会将 html 节点附加到您选择的项目中。

【讨论】：

嗨，我的是聊天应用程序，我为不同的用户提供了 100 张不同的图像..如何使用您的功能？我应该在函数中传递变量吗？我还有味精和其他东西要附加。
只需新建一个img 元素并相应地调整src 属性。或者对每个新图像执行 $(imgselector)[0].cloneNode()。
当我追加它时，它只是作为文本追加 [object HTMLImageElement]
你去吧，我可能有点过火了，但这是你可以接近它的最好方法 imho ;-) liveweave.com/uM9Ayk
很高兴听到。至少您现在拥有一个非常快速的聊天应用程序。