顯示靜態圖像，但與動畫GIF交換一次GIF，如果完全加載

Question

我正在建立一個很多大型（800KB）動畫GIF的網站。我還計劃首先展示每個GIF的第一幀，然後在加載之後將其交換到動畫GIF。這樣，該網站最初看起來仍然很好。

我目前在圖像標籤中存儲GIF網址爲「data-gif ='blah.gif'」。然後我可以通過jQuery來獲取GIF URL。

現在我不知道如何加載這些在後臺並獲取它們加載時的事件。

Answer 1

你想要一個「圖像預加載器」。這裏有一個例子讓你開始，但我建議搜索一個庫，有更多的想法來處理邊緣情況。

function preload(i, img) { 
 
    console.log(img); 
 
    var $img, url, $pre; 
 
    
 
    $img = $(img); 
 
    
 
    // incoming <img/> must have a 'data-gif' attribute 
 
    if (! $img || ! $img.data('gif')) { 
 
    return; 
 
    } 
 

 
    url = $img.data('gif'); 
 
    $pre = $('<img />'); 
 

 
    // Set up handler to replace original images's 'src' attribute 
 
    // with the data-gif URL once the replacement is loaded 
 
    $pre.on('load', function() { 
 
    $img.attr('src', url); 
 
    }); 
 

 
    $pre.attr('src', url); 
 
} 
 

 
$('#images img').each(preload);

#images img { 
 
    width: 320px; 
 
} 
 

 
#images { 
 
    list-style: none; 
 
} 
 

 
#images li { 
 
    margin-bottom: 2rem; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<h1>Image preloader test</h1> 
 
<ul id="images"> 
 
<li><img src="//placehold.it/960x540/99eeee" data-gif="http://static1.1.sqspcdn.com/static/f/1376538/22414391/1365600694390/typing.gif?token=v5utJCt1OsYJZ%2BIzFfWubDICtZI%3D" /></li> 
 

 
    <li><img src="//placehold.it/960x540/ee99ee" data-gif="http://static1.1.sqspcdn.com/static/f/1376538/22414389/1365600692520/reading.gif?token=v5utJCt1OsYJZ%2BIzFfWubDICtZI%3D" /></li> 
 

 
    <li><img src="//placehold.it/960x540/eeee99" data-gif="http://static1.1.sqspcdn.com/static/f/1376538/22414392/1365600694820/wireframe.gif?token=v5utJCt1OsYJZ%2BIzFfWubDICtZI%3D" /></li> 
 

 
    <li>Broken link: never swaps:<br/><img src="//placehold.it/960x540/999999" data-gif="http://example.com/asfazsdasfd.gif" /></li> 
 

 
</ul>