Rails 3.1：如何预加载图像

Question

Answer 1

要消除 IMG 标签中的指纹，您可以使用 Rails image_tag 并指定图像路径包括“资产”部分，如下所示：

<%= image_tag "/assets/whatever_image.png", :border => '0', :alt => nil %>

Answer 2

现在的最佳实践是使用

<link>

标签来定义要预加载的图像。您可以使用 Rails URL 帮助器来确保您在生成的 CSS 中指定完全相同的 URL。

例如，将其添加到

<head>

部分：

    <link rel="preload" href="<%= image_url("layout/bg-texture-pattern.webp") %>" as="image" type="image/webp">

确保测试并检查浏览器网络请求，以确保它仅被请求一次，并且在其他图像之前被请求。我能够看到检查之前/之后的差异。

其他属性有助于确保浏览器可以尽可能地优化它。请参阅：https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel/preload