破损的图像标签瞬间显示

Question

有没有办法在页面加载时瞬间不显示损坏的图像标签？

看这个例子：http://jsfiddle.net/v8DLe/196/

我已经在使用：onerror="this.style.display ='none'"

我宁愿仍然使用 img 标签，而不是将 div 与 style={{ backgroundImage: ...}}

一起使用

Answer 1

先隐藏它们。在 onLoad 事件触发时显示它们。

img {
  display: none;
    width:200px;
    height:200px;
}

<img src="abc" alt=" " onload="this.style.display ='block'"/>
<img src="abc" alt=" " onload="this.style.display ='block'"/>
<img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" alt=" " onload="this.style.display ='block'"/>
<img src="abc" alt=" " onload="this.style.display ='block'"/>
<img src="abc" alt=" " onload="this.style.display ='block'"/>
<img src="abc" alt=" " onload="this.style.display ='block'"/>