如何为用户加载大型动画 gif答案

【问题标题】：How to load a large animated gif for the user如何为用户加载大型动画 gif
【发布时间】：2014-12-04 17:11:52
【问题描述】：

我的网站将有一个大的动画 gif（1900 像素宽）。如您所料，初始加载非常长，动画非常不稳定。有没有更好的方法来加载 gif，这样它就不会向下拖动网站（并使滚动不连贯）？

【问题讨论】：

标签： javascript html css loading animated-gif

【解决方案1】：

如果您以1px 宽和1px 高加载图像，它不会影响您的滚动。这是一个不错的小 CSS/HTML 大图像加载技巧：

&lt;img src="http://placekitten.com/1000/1000" width="1" height="1" onload="this.style.height = 'auto'; this.style.width = 'auto';"&gt;

加载1px大小的图片，加载完毕后正常显示。

如果您只想在主体加载后加载图像，请尝试以下操作：

function initBanner(){
  
  var bannerSrc = "http://placekitten.com/1000/1000";
  // contains the src of the image
  
  var banner = document.getElementById('banner1');
  // this is the emage object
  
  banner.src = bannerSrc;
  // add the src to the image
  
  }

<body onload="initBanner()">
  <!-- when the body has finished loading, call function initBanner() -->

  <img id="banner1" src="" />

</body>

【讨论】：

这是一个动画 gif，所以我必须加载完整的图像。我想知道我是否可以延迟加载。基本上，加载页面然后加载 gif 而不会影响页面本身。有意义吗？
我不会想到的！不错！

【解决方案2】：

您可以预加载图像，然后在加载后将其插入页面中的某个位置：

var image = new Image();
image.onload = function() {
    document.body.appendChild(image);
};
image.src = 'image.gif';

JSFiddle

【讨论】：