Javascript：预加载加载图像答案

【问题标题】：Javascript : Preload loading imageJavascript：预加载加载图像
【发布时间】：2014-02-24 17:58:49
【问题描述】：

在 Javascript 中显示我的加载程序时遇到问题。事实上，我的资产文件夹中有很多重度视频，当我在 Javascript 中加载我的页面时，我的图像加载器仅在几秒钟后显示，而我希望它首先加载.

有没有办法在我的所有视频资产之前预加载它？

提前非常感谢！

【问题讨论】：

标签： javascript jquery loading onload preloading

【解决方案1】：

在任何视频开始下载等之前运行的脚本中：

var img = new Image();
img.src = 'http://yoursite.com/preload-this-image.gif';

这应该确保图像在 DOM 渲染器到达时立即显示。

如果 DOM 中的任何重资产阻碍了该进程，您可以将它们向前移动并在使用 JavaScript 加载文档后将它们向后移动。

【讨论】：

【解决方案2】：

您可以在整个页面呈现之前显示加载器 gif：

CSS：

.loader {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  background: url('/img/page-loader.gif') 50% 50% no-repeat rgb(249,249,249);
}

HTML：

<div class="loader"></div>

JS：

$(window).load(function() {
  $('.loader').fadeOut('slow');
});

【讨论】：

【解决方案3】：

您实际上可以将图像转换为 base-64 编码的字符串，并将其包含在您的 CSS 或 HTML 中。这保证了它会在其他任何东西之前被加载。

这是一个图像转换器：http://webcodertools.com/imagetobase64converter

您可以将其用作内嵌图片或 CSS 背景图片：

内嵌 HTML：

<img alt="" src="data:image/gif;base64,R0lGODlhEAAQAPIAAP///wAAAMLCwkJCQgAAAGJiYoKCgpKSkiH+GkNyZWF0ZWQgd2l0aCBhamF4bG9hZC5pbmZvACH5BAAKAAAAIf8LTkVUU0NBUEUyLjADAQAAACwAAAAAEAAQAAADMwi63P4wyklrE2MIOggZnAdOmGYJRbExwroUmcG2LmDEwnHQLVsYOd2mBzkYDAdKa+dIAAAh+QQACgABACwAAAAAEAAQAAADNAi63P5OjCEgG4QMu7DmikRxQlFUYDEZIGBMRVsaqHwctXXf7WEYB4Ag1xjihkMZsiUkKhIAIfkEAAoAAgAsAAAAABAAEAAAAzYIujIjK8pByJDMlFYvBoVjHA70GU7xSUJhmKtwHPAKzLO9HMaoKwJZ7Rf8AYPDDzKpZBqfvwQAIfkEAAoAAwAsAAAAABAAEAAAAzMIumIlK8oyhpHsnFZfhYumCYUhDAQxRIdhHBGqRoKw0R8DYlJd8z0fMDgsGo/IpHI5TAAAIfkEAAoABAAsAAAAABAAEAAAAzIIunInK0rnZBTwGPNMgQwmdsNgXGJUlIWEuR5oWUIpz8pAEAMe6TwfwyYsGo/IpFKSAAAh+QQACgAFACwAAAAAEAAQAAADMwi6IMKQORfjdOe82p4wGccc4CEuQradylesojEMBgsUc2G7sDX3lQGBMLAJibufbSlKAAAh+QQACgAGACwAAAAAEAAQAAADMgi63P7wCRHZnFVdmgHu2nFwlWCI3WGc3TSWhUFGxTAUkGCbtgENBMJAEJsxgMLWzpEAACH5BAAKAAcALAAAAAAQABAAAAMyCLrc/jDKSatlQtScKdceCAjDII7HcQ4EMTCpyrCuUBjCYRgHVtqlAiB1YhiCnlsRkAAAOwAAAAAAAAAAAA==" />

或 CSS：

background-image: url(data:image/gif;base64,R0lGODlhEAAQAPIAAP///wAAAMLCwkJCQgAAAGJiYoKCgpKSkiH+GkNyZWF0ZWQgd2l0aCBhamF4bG9hZC5pbmZvACH5BAAKAAAAIf8LTkVUU0NBUEUyLjADAQAAACwAAAAAEAAQAAADMwi63P4wyklrE2MIOggZnAdOmGYJRbExwroUmcG2LmDEwnHQLVsYOd2mBzkYDAdKa+dIAAAh+QQACgABACwAAAAAEAAQAAADNAi63P5OjCEgG4QMu7DmikRxQlFUYDEZIGBMRVsaqHwctXXf7WEYB4Ag1xjihkMZsiUkKhIAIfkEAAoAAgAsAAAAABAAEAAAAzYIujIjK8pByJDMlFYvBoVjHA70GU7xSUJhmKtwHPAKzLO9HMaoKwJZ7Rf8AYPDDzKpZBqfvwQAIfkEAAoAAwAsAAAAABAAEAAAAzMIumIlK8oyhpHsnFZfhYumCYUhDAQxRIdhHBGqRoKw0R8DYlJd8z0fMDgsGo/IpHI5TAAAIfkEAAoABAAsAAAAABAAEAAAAzIIunInK0rnZBTwGPNMgQwmdsNgXGJUlIWEuR5oWUIpz8pAEAMe6TwfwyYsGo/IpFKSAAAh+QQACgAFACwAAAAAEAAQAAADMwi6IMKQORfjdOe82p4wGccc4CEuQradylesojEMBgsUc2G7sDX3lQGBMLAJibufbSlKAAAh+QQACgAGACwAAAAAEAAQAAADMgi63P7wCRHZnFVdmgHu2nFwlWCI3WGc3TSWhUFGxTAUkGCbtgENBMJAEJsxgMLWzpEAACH5BAAKAAcALAAAAAAQABAAAAMyCLrc/jDKSatlQtScKdceCAjDII7HcQ4EMTCpyrCuUBjCYRgHVtqlAiB1YhiCnlsRkAAAOwAAAAAAAAAAAA==);

【讨论】：

感谢您修复我的 JS，Scott。 ;)

【解决方案4】：

我会将页面源代码中的图像硬编码为 base-64 编码字符串，或者替换为内联 svg。你也可以使用 rel="preload" 看看这是否适合你：

 <link rel="preload" href="bg-image.png" as="image" media="(max-width: 800px)">

看到这个：https://developer.mozilla.org/en-US/docs/Web/HTML/Preloading_content

【讨论】：