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

-2

我的网站将有一个大的动画gif（1900px宽）。正如你所期望的那样，初始负载非常长，动画非常不稳定。有没有更好的方式来加载GIF，所以它不会拖动网站（并使滚动波涛汹涌）？如何为用户加载大的动画gif

2014-12-04 dcp3450

如果你加载的图像的宽度为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>

来源

2014-12-04 17:15:48

这是一个动画GIF，所以我必须加载完整的图像。我不知道我是否可以延迟加载。基本上，加载页面然后加载gif而不会影响页面本身。合理？ – dcp3450 2014-12-04 22:02:40

@ dcp3450，检查我的编辑。那是你要的吗？ – 2014-12-04 23:29:21

我不会想到这一点！太好了！ – www139 2014-12-07 15:20:11

您可以预加载图像，那么一旦它在你的页面的某个地方加载插入：

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

JSFiddle

来源

2014-12-04 19:51:43

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

回答

相关问题