如何爲用戶加載大的動畫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

回答

相關問題