我有一个图像,我将动态填充src稍后与javascript,但为了方便,我希望图像标签存在于页面加载,但只是不显示任何东西。我知道<img src= " />是无效的,那么最好的方法是什么?
当前回答
简单来说,就像这样:
<img id="give_me_src"/>
其他回答
在我看来,这些天最好的简短,理智和有效的空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规范中是隐式的。
我建议动态添加元素,如果使用jQuery或其他JavaScript库,它是相当简单的:
http://api.jquery.com/appendTo/ http://api.jquery.com/prependTo/ http://api.jquery.com/html/
再看看prepend和append。否则,如果你有一个这样的图像标签,你想让它有效,那么你可以考虑使用一个虚拟的图像,如1px透明gif或png。
我发现使用:
<img src="file://null">
不会发出请求并正确验证。
浏览器只会阻止对本地文件系统的访问。
但是在Chrome的控制台日志中可能会显示一个错误,例如:
Not allowed to load local resource: file://null/
我有段时间没这么做了,但我也经历过一次。
<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
如果你保持SRC属性为空,浏览器将发送请求到当前页面的url 如果不想要任何url,总是在SRC属性中添加1*1透明img
src="data:image/gif;base64,R0lGODlhAQABAAAAACwAAAAAAQABAAA="
推荐文章
- 如何设置身体高度溢出滚动
- 在输入type="number"时禁用webkit的旋转按钮?
- 如何在另一个元素之后添加一个元素?
- 我如何有效地解析HTML与Java?
- “ ”和“”有什么区别?
- 如何使用JavaScript代码获得浏览器宽度?
- 防止滚动条增加到Chrome页面的宽度
- 使用图像而不是单选按钮
- 我可以嵌套一个<按钮>元素内< >使用HTML5?
- 设置TextView文本从html格式的字符串资源在XML
- 为什么我的球(物体)没有缩小/消失?
- Twitter Bootstrap 3 Sticky Footer
- CSS在特定的“内联块”项之前/之后换行
- 很好的初学者教程socket.io?
- 点击下载Href图片链接