将图像src设置为空

Question

我想将图像设置为空.通过做src=""很多人说它可能会给浏览器带来问题:

所以我不确定下面是否可以面对与将src设置为空相同的问题:

<img id="myImage">

因为在这种情况下没有src属性.

所以,如果我想最初将图像设置为空,那么我能做的最好的是什么？

Answer 1

最佳方案

初始化图像如下:src="//:0"像这里:<img id="myImage" src="//:0">

编辑:根据Alex下面的评论,使用//:0显然可以触发onError事件img.所以要小心这一点.

编辑2:来自Drkawashima的评论:从Chrome 61开始,src="//:0"似乎不再触发onError事件.

其他方案

或者,您可以使用非常小的图像,直到您实际填充src标记:如此图像.使用这个"非常小的图像",您可以像这样初始化标记:

<img src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs%3D" width="0" height="0" alt="" />

从DOM中删除元素

或者,如果您只是不希望元素出现在DOM中,只需使用一些JavaScript:

var myObject = document.getElementById('myObject');
myObject.parentNode.removeChild(myObject);

_{(根据这个答案,.remove()由于DOM 4中的浏览器支持不佳,不推荐使用JavaScript的功能)}

或者只是使用一些jQuery:

$("#myObject").remove();

Answer 2

我所知道的最普遍接受的方式（由CSSTricks推荐）是 1px 图像

<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" alt="">

它会在 devtools 中显示为 0B 网络请求，因此如果您正在进行性能监控，您可能会对图像请求的数量感到惊讶。但除此之外没有什么可担心的。

注意：您会注意到我包含了该alt属性，但它被设置为空值。你应该这样做！始终包含alt或屏幕阅读器会大声朗读 img 网址。