我有一个网络应用程序,可以在很长一段时间内动态加载数据。数据内有图像的链接,然后在浏览器中呈现这些图像。
e.g.
var object = {
Name: ko.observable("Foo"),
Ref: ko.observable("Bar"),
ImageUrl: ko.observable("http://.....")
}
我在用淘汰赛 http://knockoutjs.com/的模板绑定以在屏幕上呈现数据。
<img data-bind="attr: { src: imageUrl }" />
因此,每次通过 Ajax 调用更改对象时,Knockoutjs 模板都会使用数据重新渲染,并且图像也会发生变化。
经过很长一段时间后,这些图像会积累起来并会占用更多的内存。现代浏览器似乎可以更好地应对,但问题主要在于 IE8(我们不支持
有关构建图像资源的示例,请参阅此屏幕截图。
我决定看看如果不使用<img />
标签,使用<iframe />
.
所以我的代码现在看起来像
<iframe data-bind="attr: { src: imageUrl }"></iframe>
现在发生的情况是框架已创建,但一旦 imageUrl 发生更改,框架就会简单更新,不会创建额外的资源。
因此,如果我想降低浏览器内存使用量,我可以使用这个<iframe />
技术,但我不喜欢它。它迫使我对应用程序进行许多其他更改,而且我需要使用 iframe!
我现在已经运行了各种测试,看看使用这两种技术消耗了多少内存,在同一段时间内,内存将从 81,000k 增加到 200,000k(使用<img />
)相比 81,000k 至 98,000k(<iframe />
)
Question
有没有更好的方法来管理浏览器中的图像资源?有没有办法正确处理这个图像?
我在网上搜索了答案,但到目前为止我还没有找到任何答案。
Edit
在非常基础的层面上。我尝试通过 jQuery 方法删除图像remove()
,但图像资源永远不会被删除。请参阅此小提琴以获得一个非常基本的示例。http://jsfiddle.net/ezb9e/ http://jsfiddle.net/ezb9e/
code:
html
<img src="http://www.fillmurray.com/200/300" />
JS
$(function(){
setTimeout(function(){
$('img').remove();
$('body').append($('<img />', { attr: { src: 'http://www.fillmurray.com/300/200' }}));
}, 3000);
});