Question

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

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

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

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

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

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

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

第二次追加停止图像加载

1 个答案: