Question

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

Answer 1

如果您将图片加载到1px宽且1px高，则不会影响您的滚动。这是一个很好的小CSS / HTML大图像加载黑客：

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

以1像素大小加载图像，然后在加载图像时正常显示。

如果您只想在身体加载后加载图像，请尝试以下方法：

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>

Answer 2

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

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

JSFiddle

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

2 个答案: