3

我知道这个问题的答案很可能是不……但我想问。

可以先下载一个img吗？

基本上我有一个占位符 GIF（在下载图像时显示在图像的位置，我希望尽快下载该 GIF。

我能以某种方式快速跟踪一个 img（GIF）的下载吗？

谢谢

4

5 回答 5

4

尝试在所有其他标签之前放置<img>带有 gif 的标签并将其隐藏src<img>visibility:hidden

于 2012-08-20T00:37:25.877 回答
2

您可以将该图像包含为数据 URI（如果它不是太大），这样就不会发出单独的网络请求来获取该图像。当然，它会增加实际提供的 HTML 内容的大小。

您还可以通过创建新的图像对象并设置src属性来使用 JavaScript 预加载图像。

于 2012-08-20T00:35:40.073 回答
0

您可以尝试在该 gif 之前动态加载您不想加载的所有内容（并且在大小上有些显着）。然后，您可以加载该 gif，并在完成后 - 加载其余内容。

这可以使用 Javascript 来完成。我不确定是否已经有一个库可以帮助您轻松地做到这一点，但这应该不会太难。

我会开始使用类似“在 document.ready 上，加载那个重要的 gif，然后在完成后，加载其余部分”这样的东西：

$(document).ready( function() {
    var myImportantImg = $('<img />');
    $(myImportantImg).on('load', function() { 
        // attach myImportantImg somewhere
        // load rest
    });
    $(myImportantImg).attr('src', 'http://url.to/myImg.gif');
});
于 2012-08-20T00:43:38.740 回答
0

从我读到的结合使用Data URI Scheme和 css 将是一个不错的选择：

img.placeholder {
    background: white url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAABlBMVEUAAAD///+l2Z/dAAAAM0lEQVR4nGP4/5/h/1+G/58ZDrAz3D/McH8yw83NDDeNGe4Ug9C9zwz3gVLMDA/A6P9/AFGGFyjOXZtQAAAAAElFTkSuQmCC') no-repeat scroll left top;
}

将上述代码包含在<style>文档 - 部分的 -tag 中，<head>以确保它与页面一起加载，并使用placeholder-class 标记适当的图像：

<img src="..." class="placeholder">
于 2012-08-20T00:54:25.490 回答
-1

您可以有占位符 gif，例如（在 css 中）

img{background-image:url(default_image.png)}

但是，没有好的方法可以强制一个图像在另一个图像之前加载。浏览器可以按他们想要的任何顺序加载。

您可以使占位符更有可能首先下载：

  • 如果占位符在所有页面上都相同，它可以被缓存，这样在下一页上，它已经被加载了

  • 确保占位符图像位于页面的早期（使浏览器更早开始加载，浏览器可能会按照它们在 html 中出现的顺序加载图像）。如果图像不应该在那里显示，只需执行诸如 width="0" 或 visibility: hidden; 之类的操作。

  • 将占位符放在服务器可以快速提供服务的位置（避免动态控制文件夹 - 在静态目录中提供，例如在 Apache 的 public/ 文件夹中）

  • 使占位符图像变小

  • 通过设置缓存头来鼓励缓存，以便图像在很远的将来（例如 1 年）过期，并且浏览器不需要与服务器进行检查。还要确保关闭图像的私有缓存（允许公共服务器缓存）。

数据 URI 并不是那么好。来自维基百科：

  • 数据 URI 不会与其包含的文档（例如 CSS 或 HTML 文件）分开缓存，因此每次重新下载包含的文档时都会下载数据。

  • 从同一个文档中多次引用同一个资源（例如嵌入的小图像）会导致嵌入资源的多个副本。相比之下，一个外部资源可以被任意多次引用，但只能下载和解码一次。

如果您在页面的 10 个位置使用占位符图像，您将拥有一个更大的页面。

于 2012-08-20T00:43:32.407 回答