Question

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

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

这可能与某些PHP或旧的JavaScript有关吗？

由于

Answer 1

使用悬停更改图片的网址。在这种情况下使用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'));
});

Answer 2

您可以在页面加载后将包含GIF的HTML添加到DOM，将其作为字符串插入或使用AJAX。

另一个可行的解决方案是使用CSS精灵并通过将它们组合成更大的图像来消除所有这些图像。

Answer 3

你正在考虑错误的方式。除非您在页面中包含图像，否则浏览器不会请求图像。你不应该试图阻止加载包含的图像，你应该首先不包括图像。

从代码中删除图片网址。在您目前使隐藏图像可见的任何代码中，您也可以设置URL。

Answer 4

除扩展名外，文件名是否相同？如果是这样，我会推荐这种方法

您要做的就是将.png替换为.gif这将在悬停时加载gif而不是在页面加载时加载。现在，听起来你正在将.png和.gif加载到隐藏的div中。

编辑：

然后在mouseout上，您可以将源切换回.png。