第二次附加时停止图像加载

Question

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

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

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

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

Answer 1

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

function startthefun() {
    var imgElem = document.createElement('img');
    imgElem.setAttribute('src','http://cdn.sstatic.net/Whosebug/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>

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

第二次附加时停止图像加载

Stop Image load on append 2nd time

javascript

php

jquery

caching