显示静态图像，但与动画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>