从预加载中停止GIF

Question

我正在玩我几天前创建的新网站.
该网站包含很多很多GIF,显示在首页上.截至目前,显示了静态的.png缩略图,当悬停时,它会显示gif.

这几乎是我想要的.但是,截至目前,该网站预先加载了页面上的每个gif,这需要很长时间,浪费了大量流量.如果首页上有50个GIF,每个gif是2mb,那就是每个用户100mb的流量.
是不是只能加载每个png,然后加载gif如果它徘徊？我知道第一次播放不顺畅,但我的网络酒店没有大量的网络流量.

这可能是一些PHP或旧的JavaScript吗？

谢谢

Answer 1

用悬停更改图像的URL.在这种情况下使用jQuery

$('#my_image').hover(function(){
    $('#my_image').attr('src','my.gif');
});

想要让它变得动态而不必为每个图像设置它？添加HTML5数据元素:

<img src="my.png" data-gif="my.gif" />

并使用JavaScript:

$('img').hover(function(){
    $(this).attr('src',$(this).data('gif'));
});