0

我发现这document.removeChild()实际上并没有破坏 DOM 子树，而只是将其从文档中取消链接。

对我来说，这意味着未链接的子树内的图像在子树删除后会继续加载并消耗内存一段时间。

当然，我可以将图像的src属性设置为空字符串，或者null希望这会阻止它们被加载，从而节省流量。抱歉，我还没有在许多浏览器上测试这个解决方案。

但是，我想知道是否有更简单的方法来做到这一点（强制清除子树？）。

这是测试代码：

var url = 'http://habrahabr.ru/images/bg-multilogo.png?nocache=' + Date.now(),
    cleanTheSrc  = !true, /* todo: change and play */
    jQueryRemove = !true, /* todo: change and play */
    cleanTheLink = !true; /* todo: change and play */

var img = document.createElement('img');
console.log('img created');

img.onload  = function(){console.log('img loaded');};
img.onerror = function(){console.log('img aborted');};
img.src = url;

document.body.appendChild(img);
console.log('img added to DOM (synchronously)');

if (jQueryRemove) {
    $(img).remove();
    console.log('img removed from DOM using jQuery (synchronously)');
} else {
    document.body.removeChild(img);
    console.log('img removed from DOM natively (synchronously)');
}

if (cleanTheSrc) {
    img.src = '';
}

if (cleanTheLink) { // GC does not help actually, leave these lines here for fun
    img = null;
}

这向我们表明，在您将图像从 DOM 中移除（或移除它的父节点）后，该图像继续存在于“幕后”。

我的问题是：

  1. 我的停止图像加载的解决方案对于 IE8+ 和其他流行的浏览器是否足够好？

  2. 有没有更好的办法？

更新：

出于好奇：我们可以从 DOM 中异步添加和删除元素，使用其他 JS 库并使用缓存，对我来说这并没有带来任何解决方案。

我添加了几行来尝试jQuery.remove()。我个人在 jQuery 1.6+ 中得到了相同的结果。

4

1 回答 1

0

从 DOM 添加和删除元素或其容器对图像加载没有影响。所以，它看起来是错误的方式。为了证明这一点，让我们运行上面没有 DOM 操作行的示例。

var url = 'http://habrahabr.ru/images/bg-multilogo.png?nocache=' + Date.now(),
img = document.createElement('img');
console.log('img created');

img.onload  = function(){console.log('img loaded');};
img.src = url;  // loads the image, no matter it's detached from DOM

解决方案

就像是

container.remove().find('img').attr('src', '');

足够快速和简单。

于 2013-08-27T13:31:43.437 回答