第二次附加停止图像加载

I am developing an chat application and it appends data like below

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

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

So each time when same image is appended , Its requesting the image URL again and again .

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

How to stop the image refresh on append , If the image url is already loaded, I want it to load that image cache.

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

1 个解决方案

#1

You could clone the already existing Element. That way all data and image data is preserved and doesn't need to be fetched anew. Also this method is gazillion times faster than adding the new HTML via string.

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

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

<input type="button" value="start" onclick="startthefun()"><input type="button" onclick="window.clearInterval(window.timer)" value="stahp"><div id="content"></div>

You can just simply feed the HTMLElement into the $(selector).append(HTMLElement) Jquery will append the html node to your selected item.

您只需将HTMLElement简单地输入$（选择器）.append（HTMLElement）Jquery会将html节点附加到您选择的项目。