我有一个图像,我将动态填充src稍后与javascript,但为了方便,我希望图像标签存在于页面加载,但只是不显示任何东西。我知道<img src= " />是无效的,那么最好的方法是什么?


当前回答

虽然没有有效的方法来忽略图像的源,但有一些源不会导致服务器故障。我最近有一个类似的问题与iframes和确定//:0是最好的选择。不,真的!

以//开头(省略协议)导致使用当前页面的协议,防止HTTPS页面中的“不安全内容”警告。没有必要跳过主机名,但可以使其更短。最后,端口为:0确保服务器请求不能发出(根据规范,这不是一个有效的端口)。

这是我发现的唯一一个在任何浏览器中都没有导致服务器命中或错误消息的URL。通常的选择——javascript:void(0)——如果在通过HTTPS提供服务的页面上使用,会在IE7中导致“不安全内容”警告。任何其他端口都会导致尝试服务器连接,即使是无效地址。(一些浏览器会简单地发出无效的请求并等待它们超时。)

这在Chrome, Safari 5, FF 3.6和IE 6/7/8中进行了测试,但我希望它能在任何浏览器中工作,因为它应该是网络层,可以杀死任何尝试的请求。

其他回答

另一种选择是嵌入一个空白图像。任何符合你的目的的图像都可以,但是下面的例子编码了一个只有26字节的GIF——来自http://probablyprogramming.com/2009/03/15/the-tiniest-gif-ever

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

根据下面的评论编辑:

当然,您必须考虑您的浏览器支持需求。不支持IE7或更低版本是值得注意的。http://caniuse.com/datauri

根据本文,使用真正空白、有效且高度兼容的SVG:

src = " +:形象/ svg xml数据;charset = utf8, 3Csvg % 20xmlns = http://www.w3.org/2000/svg’排% 3C / svg %排”

与任何SVG一样,它的默认大小为300x150px,但是您可以在img元素的默认样式中使用它,因为在实际实现中任何情况下都可能需要它。

简单来说,就像这样:

<img id="give_me_src"/>

我有段时间没这么做了,但我也经历过一次。

<img src="about:blank" alt="" />

是我最喜欢的—//:0表示您将尝试在端口0 (tcpmux端口?)上与原始服务器建立HTTP/HTTPS连接—这可能是无害的,但我宁愿不这样做。哎呀,浏览器可能只看到端口0,甚至不发送请求。但我还是不希望你这么说因为这可能不是你想说的。

无论如何,在我测试的所有浏览器中,about:blank的渲染实际上都非常快。我只是把它扔到W3C验证器中,它没有抱怨,所以它甚至可能是有效的。

编辑:不要这样做;它不能在所有浏览器上工作(它会显示一个“破碎的图像”图标,正如在这个答案的评论中指出的那样)。使用<img src='data:…下面的解决方案。或者如果你不关心有效性,但仍然想避免对服务器的多余请求,你可以执行<img alt="" />,不带src属性。但这是无效的HTML,所以要小心选择。

Test Page显示了一大堆不同的方法:http://desk.nu/blank_image.php—提供了各种不同的文档类型和内容类型。-正如下面评论中提到的,使用Mark Ormston的新测试页面:http://memso.com/Test/BlankImage.html

在我看来,这些天最好的简短,理智和有效的空img src的方式是这样的:

<img src="data:," alt>
or
<img src="data:," alt="Alternative Text">

第二个例子显示“Alternative Text”(加上Chrome和IE中的broken-image-icon)。

"data:,"是一个有效的URI。空媒体类型默认为文本/纯。所以它表示一个空文本文件,相当于“data:text/plain”,

OT:所有浏览器都能理解纯alt。你可以省略="",这在HTML规范中是隐式的。