相关疑难解决方法(0)

我有一个图像,我稍后将使用javascript动态填充src,但为了方便起见,我希望图像标记存在于pageload但不显示任何内容.我知道<img src='' />是无效的,那么最好的方法是什么？

我有一个<img>显示远程图像.我想让它回退到另一个本地图像,在远程的图像无法访问的情况下.

<img class="cc_image fallback" src="http://www.iconarchive.com/download/i82888/limav/flat-gradient-social/Creative-Commons.ico"> 

.cc_image {
    width: 256px;
    height: 256px;
}

.cc_image.fallback {
    /* this URL here is theoretically a local one (always reachable) */
    background-image: url('https://cdn2.iconfinder.com/data/icons/picons-basic-3/57/basic3-010_creative_commons-256.png');
}

它的工作原理是,当找不到src图像时,将显示背景图像.

缺点是:

• 它将始终加载背景图像(额外的HTTP请求)
• 它在原始图像的位置显示了一个小的未找到图标(Safari上的问号),显示在背景图像上方(不是一个大问题,但我想摆脱它)

我怎么能解决这些问题？或者:是否有其他技术可以达到相同的效果？

我发现了这个问题,但是给定的解决方案依赖于Javascript或on <object>(这似乎不适用于Chrome).我想要一个纯CSS/HTML解决方案,如果可能的话没有Javascript.

我知道这个倍数,background-image但我不确定它是否是一个不错的选择(浏览器支持？它会与无法访问的图像一起回退吗？).或者我在考虑将SVG图像嵌入为数据uri.

建议最灵活(和兼容)的方法？

我是JavaScript新手,因此对变量范围感到困惑...我正在尝试加载图像,并在不存在时将其替换为另一个URL.我必须在纯JavaScript中完成它.

在这里,我有2个版本极其相似,但它们的表现不同.唯一的共同点是:它们不起作用.第3版需要刷新,在IE下不起作用.d是具有数字属性的对象,没有问题.

这是他们的共同点

.attr("xlink:href", function (d) {
  var img = new Image();

这里版本1:Both onload和onerror被调用.然而d接收src,不幸的是它总是generic.jpg.

  function onLoadHandler() {
     d.src = "http://.../peopleimages/" + d.num + ".jpg";
     alert(d.name + " onload called");
  }
  function onErrorHandler() {
     d.src = "http://.../images/generic.jpg";
     alert(d.name + " onerror called");
  }
  img.onload = onLoadHandler();
  img.onerror = onErrorHandler();
  img.src = "http://.../peopleimages/" + d.num + ".jpg";
  return d.src;
  }

这里版本2:根据图像的存在,调用onload或onerror.但是警报时d.src的值是未定义的.

  img.onload = function () {
     alert(d.name + " : loaded");
     d.src = "http://.../peopleimages/" + d.num + ".jpg";
  } …