JavaScript：我如何延迟返回img.complete的值？

Question

我已经写了一个脚本来测试IMG标记中的SVG支持：

function SVGinIMG() {
  var SVGdata = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNzUiIGhlaWdodD0iMjc1Ij48L3N2Zz4%3D'
  var i = document.createElement('img');
  i.setAttribute('src',SVGdata);
  return i.complete;
}
window.onload = function() {
  var hasSVG = SVGinIMG();
  alert(hasSVG);
}

这段代码实现了我想要的功能，但在使用 WebKit 浏览器运行脚本时，complete 属性无法在第一次加载页面时触发；只有在刷新页面后，它才能按照预期工作。由于 return 函数在图像加载完成之前就已经运行，那么最好的方法是延迟函数执行时间。

- stopsatgreen

---

这里有一个类似于你的脚本，可能会给你一些启示：http://my.opera.com/Fyrd/blog/svg-image-and-background-image-replacer - Erik Dahlström

哈！这正是我在编写脚本时参考的部分内容，但我认为它有点太复杂了。不过还是谢谢你提供链接，我会更仔细地研究它。 - stopsatgreen

Answer 1

我有点把事情复杂化了；其实我只需要load事件：

function SVGDetect() {
  var testImg = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNzUiIGhlaWdodD0iMjc1Ij48L3N2Zz4%3D';
  var img = document.createElement('img')
  img.setAttribute('src',testImg);
  img.addEventListener('load',setCSS,true);
}

当图像加载时，这将运行另一个函数。如果浏览器不支持在图像中使用SVG，则永远不会发生这种情况。

- stopsatgreen

---

不太喜欢这个版本，因为它需要回调而不是只返回 true/false。无论如何，感谢原始的“问题”！有什么优势吗？ - Julian