Question

我有一个HTML标记。我需要一个DOM树来重写image的src属性。我的代码如下所示......

var markup = '<img src="abc.jpg"/>';
var div = document.createElement("div");
div.innerHTML = markup; 
(rewrite logic here(div))
document.body.appendChild(div);

但是，当在第3行执行时，会发出错误请求。

获取https://stackoverflow.com/questions/ask/abc.jpg 404（未找到）

如何控制此图像预加载请求？当我将元素附加到文档中然后发送出去。

我使用documentFragment作为测试，它也有这个问题。

var str ='<img src="abc.jpg"/>';
var range =document.createRange();
range.selectNodeContents(document.documentElement);
var fragment =range.createContextualFragment(str);

Answer 1

很简单。也可以使用createElement作为图像

如果在图像上使用createElement，则可以为其指定错误处理程序

例如

var img = document.createElement("img");
img.onload=function() { // only add the image if found
  var div = document.createElement("div");
  div.appendChild(this);
  document.body.appendChild(div);
}
img.src="abc.gif";

或

var div = document.createElement("div");
var img = document.createElement("img");
img.onerror=function() {
  this.src="notfound.gif"; 
}
img.src="abc.gif"; 
div.appendChild(img);
document.body.appendChild(div);

如果由于复杂的html很难，你可能应该用“loading.gif”替换图像src，然后在以下情况下更改图像的src：

var imgs = document.getElementById('newDiv').getElementsByTagName("img");
for (var i=0;i<imgs.length;i++) {
  img = imgs[i];
  img.onerror = ....
  img.src=extractedImagesFromHtmlSnippet[i]
}

如何控制图像预加载请求？

1 个答案: