我有一个图像,我将动态填充src稍后与javascript,但为了方便,我希望图像标签存在于页面加载,但只是不显示任何东西。我知道<img src= " />是无效的,那么最好的方法是什么?
当前回答
正如评论中所写的,这种方法是错误的。
我没有找到这个答案之前,但根据W3规范有效的空src标签将是一个锚链接#。
示例:src="#", src="#empty"
页面验证成功,没有发出额外的请求。
其他回答
我有段时间没这么做了,但我也经历过一次。
<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规范中是隐式的。
另一种选择是嵌入一个空白图像。任何符合你的目的的图像都可以,但是下面的例子编码了一个只有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
<img src="invis.gif" />
gif是一个单像素的透明gif。这在未来的浏览器版本中不会中断,并且自90年代以来一直在传统浏览器中工作。
PNG也可以工作,但在我的测试中,GIF是43字节,PNG是167字节,所以GIF赢了。
另外,不要忘记Alt标签,验证器也喜欢它们。
我发现,简单地将src设置为一个空字符串,并在CSS中添加一个规则来隐藏损坏的图像图标就可以了。
[src=''] {
visibility: hidden;
}
推荐文章
- 如何关闭mysql密码验证?
- 使伸缩项目正确浮动
- 形式内联内的形式水平在twitter bootstrap?
- 自定义元素在HTML5中有效吗?
- 如何触发自动填充在谷歌Chrome?
- 创建圈div比使用图像更容易的方法?
- 为什么Chrome浏览器不正确地确定页面是在不同的语言,并提供翻译?
- 在网页上用鼠标模拟震颤(例如帕金森病)?
- Bootstrap抛出Uncaught错误:Bootstrap的JavaScript需要jQuery
- 如何改变文本区域的边框颜色:焦点
- 我如何设置背景颜色为文本的宽度,而不是整个元素的宽度,使用CSS?
- 如何删除和清除所有的本地存储数据
- 强制打开“另存为…”弹出打开文本链接点击PDF在HTML
- 如何修改标签文本?
- c#消毒文件名