19

考虑以下示例：

<noscript>
    <img class="photo" src="example.png">
</noscript>

客户端是否仅在禁用 Javascript 时才下载图像文件？（我知道如果在本例中禁用了 Javascript，客户端只能看到图像）

我问的原因是因为我一直在为外部 CSS 中的几个背景图像属性使用 base64 数据 URI（避免 http 请求）。我还想通过外部 Javascript 更新它们的值，将 base64 数据 URI 用于某些 img 标签的 src 值（以保留缓存的好处）。

本质上，这样做的重点是避免/限制 http 请求，所以我想知道我是否可以优雅地降级并且仅在禁用 Javascript 时才获取图像文件？还是无论如何都下载了图像？

4

2 回答 2

18

简短回答：
不，图像不会在<noscript>元素内下载

技术答案：

我刚刚在我的个人网站上对禁用 JavaScript 的功能进行了一些测试，并看到了这篇文章……顺便说一句，JavaScript 仍然被禁用。

好吧，在此网页的最顶部，Stack Overflow 有一条警告消息，其中指出：

“Stack Overflow 在启用 JavaScript 的情况下效果最佳”</p>

作为那种倾向于在我查看的几乎每个网站（！）上“查看源代码”的网络极客，消息的 HTML 代码如下：

<noscript>
    <div id="noscript-warning">Stack Overflow works best with JavaScript enabled<img src="http://example.com/path/to/1x1-pixel.gif" alt="" class="dno"></div>
</noscript>

那里没有什么太开创性的。然而，让我感兴趣的是IMG元素，它引用了一个 1px x 1px 的不可见图像。

我假设分析/统计软件必须使用此图像来检测有多少用户在没有 JavaScript 的情况下进行浏览。如果这个假设是正确的（并且没有任何其他原因在这里使用我在这里忽略的空白 1x1 像素图像），那么这基本上可以确认以下内容：浏览器不会下载元素中任何内容的NOSCRIPT内容，除了JavaScript 实际上被禁用的情况。（而且我很高兴地说，似乎没有任何复古的 98 式布局技术在进行中！）;-)

（PS——我希望我不会因为指出这一点而冒犯 Stack Exchange 网络上的任何人！）

于 2013-12-22T16:41:58.043 回答
14

HTML 4.01 规范只是说noscript在某些情况下不呈现的内容。但是，这表明浏览器在这种情况下不应该根据其内容执行任何 GET 操作，因为这样的操作将毫无意义并且会降低效率。

HTML5 草案更加明确，可能反映了实际的浏览器行为。它强调了noscript元素：“它的工作原理是在启用脚本时'关闭'解析器，以便元素的内容被视为纯文本而不是真实元素”。（该注释涉及为什么noscript在使用 XHTML 语法时不起作用，但它也揭示了它的工作原理，何时起作用。）

所以我们可以预期，当启用脚本时，noscript甚至不会解析 的内容（除了识别结束标记）。Blender 的回答似乎证实了这一点，我对 Firefox 的小实验也是如此：

<img src=foo style="foo: 1">
<noscript>
<img src=bar style="bla: 1">
</noscript>

启用脚本时，Firefox 发出失败的 GET 请求foo但没有请求。bar此外，它foo: 1在错误控制台中显示关于错误 CSS 代码的警告，但没有关于bla: 1. 所以显然img标签甚至没有被解析。

但是，我看不出这个问题与作为提出问题的理由所呈现的场景有什么关系。我认为您在img外部使用了一个元素noscript，并使用 URL 将所需的初始内容放在那里data:（当脚本被禁用时，它将作为后备保留为最终内容）。

于 2013-02-06T06:53:20.250 回答