从预加载中停止GIF

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

这几乎是我想要的。然而，截至目前，该网站预先加载页面上的每一个gif，这需要很长时间，并且浪费了很多流量。如果首页上有50个gif，每个gif是2mb，那么每个用户就有100mb的流量。
是不是只能加载每个PNG，然后加载GIF，如果它悬停？我知道它不会在第一时间顺利播放，但我的网络酒店没有很多网络流量。

这可能与一些PHP或老式的JavaScript？

谢谢

来源

2012-02-22 Filuren

你如何用gif换出png？ CSS？ JavaScript的？ – 2012-02-22 19:52:50

你如何做悬停改变？用CSS？ – cha0site 2012-02-22 19:53:39

PHP是服务器端，所以它不相关。你需要的是在客户端运行的JavaScript。 CSS也可以工作（使用：hover事件），但是我不确定它是否也会预载图像（通过测试和观察服务器日志来检查是否容易）。 – Kitsune 2012-02-22 19:54:19

使用悬停更改图像的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')); 
});

来源

2012-02-22 19:53:15

我在哪里添加jQuery和JavaScript到我的页面？我是否必须为我的所有标签使用HTML5数据元素？ – Filuren 2012-02-22 20:00:40

使用您要替换的所有图像的数据元素。 jQuery可以放在任何地方，只是不要忘记在你的站点上包含jQuery – 2012-02-22 20:12:47

......或者更好的是不要使用jQuery来处理那些简单的任务，这是开销。 – Bergi 2012-02-22 20:16:02

您可以添加包含GIF图片的DOM页面加载后，将它作为一个字符串或使用AJAX的HTML。

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

来源

2012-02-22 19:54:36

如何使用AJAX加载图像？ – Bergi 2012-02-22 19:56:50

你不这样做 - 你使用AJAX来抓取包含图像引用的HTML。 – 2012-02-22 20:00:11

好的，但这似乎是一个小图像网址的开销... – Bergi 2012-02-22 20:08:14

您正在考虑错误的方式。除非您在图像中包含图像，否则浏览器不会请求图像。你不应该试图阻止加载包含的图像，你应该简单地不包括在第一个地方的图像。

从代码中移除图片网址。无论您使用哪种代码，隐藏图像都可见，您也可以设置网址。

来源

2012-02-22 19:54:55 hvd

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

Stop a gif animation onload, on mouseover start the activation

你会做什么不同的是.gif这种替换.png将加载悬停，而不是在页面加载的GIF。现在，它听起来像你正在一个隐藏的div加载.png和.gif。

编辑：

然后鼠标移开时，你会切换源回.png上。

来源

2012-02-22 19:55:52 Bot

从预加载中停止GIF

回答

相关问题