Question

我有一个包含大量GIF的页面。

<img src="gif/1303552574110.1.gif" alt="" >
<img src="gif/1302919192204.gif" alt="" >
<img src="gif/1303642234740.gif" alt="" >
<img src="gif/1303822879528.gif" alt="" >
<img src="gif/1303825584512.gif" alt="" >

我在寻找什么

1页面加载=＆gt;停止所有GIF的动画

2 on mouseover =＆gt;动画开始于那个gif

3 on mouseout =＆gt;动画再次停止为那个gif

我想这可以在Jquery中完成，但我不知道如何。

Answer 1

不，你无法控制图像的动画。

每个图像需要两个版本，一个是动画的，另一个不是。在悬停时，您可以轻松地从一个图像更改为另一个图像。

示例：

$(function(){
  $('img').each(function(e){
    var src = $(e).attr('src');
    $(e).hover(function(){
      $(this).attr('src', src.replace('.gif', '_anim.gif'));
    }, function(){
      $(this).attr('src', src);
    });
  });
});

更新

时间流逝，可能性发生变化。正如kritzikatzi指出的那样，拥有两个版本的图像并不是唯一的选择，你可以使用canvas元素来创建动画第一帧的副本。请注意，这并不适用于所有浏览器，例如IE 8不支持canvas元素。

Answer 2

我意识到这个答案已经很晚了，但我找到了一个相当简单，优雅，有效的解决方案来解决这个问题，觉得有必要在这里发布。

然而，有一点我觉得我需要明确的是，这不会在鼠标悬停时启动gif动画，在鼠标悬停时暂停它，并在再次鼠标悬停时继续它。遗憾的是，这与GIF无关。（可以使用一个接一个显示的图像来看起来像一个gif，但是拆开GIF的每一帧并将所有这些URL复制到一个脚本中会非常耗时）

我的解决方案是使图像看起来像是在鼠标悬停时开始移动。你将你的gif的第一帧作为图像并将该图像放在网页上，然后在鼠标悬停时用gif替换图像，看起来它开始移动。它会在mouseout上重置。

只需将此脚本插入HTML的主题部分：

$(document).ready(function()
{
    $("#imgAnimate").hover(
        function()
        {
            $(this).attr("src", "GIF URL HERE");
        },
        function()
        {
            $(this).attr("src", "STATIC IMAGE URL HERE");
        });
});

并将此代码放在要动画的图像的img标记中。

id="imgAnimate"

这将在鼠标悬停时加载gif，因此看起来你的图像开始移动。（这比加载gif onload更好，因为从静态图像到gif的过渡是不连贯的，因为gif将在随机帧上开始）

对于多个图像只需~~重新创建脚本~~创建一个函数：

<script type="text/javascript">

var staticGifSuffix = "-static.gif";
var gifSuffix = ".gif";

$(document).ready(function() {

  $(".img-animate").each(function () {

     $(this).hover(
        function()
        {
            var originalSrc = $(this).attr("src");
            $(this).attr("src", originalSrc.replace(staticGifSuffix, gifSuffix));
        },
        function()
        {
            var originalSrc = $(this).attr("src");
            $(this).attr("src", originalSrc.replace(gifSuffix, staticGifSuffix));  
        }
     );

  });

});
</script>

</head>
<body>

<img class="img-animate" src="example-static.gif" >
<img class="img-animate" src="example-static.gif" >
<img class="img-animate" src="example-static.gif" >
<img class="img-animate" src="example-static.gif" >
<img class="img-animate" src="example-static.gif" >

</body>

该代码块是一个正常运行的网页（基于您提供给我的信息），它将显示静态图像并悬停，加载和显示gif。您所要做的就是插入静态图像的URL。

Answer 3

我认为jQuery plugin freezeframe.js可能会派上用场。 freezeframe.js是一个jQuery插件，可自动暂停GIF并重新启动鼠标悬停动画。

我想你可以轻松地调整它以使其适用于页面加载。

Answer 4

最好的选择可能是有一个静止图像，当你想要停止它时，你可以替换它。

<img src="gif/1303552574110.1.gif" alt="" class="anim" >
<img src="gif/1302919192204.gif" alt="" class="anim" >
<img src="gif/1303642234740.gif" alt="" class="anim" >
<img src="gif/1303822879528.gif" alt="" class="anim" >
<img src="gif/1303825584512.gif" alt="" class="anim" >

$(window).load(function() {
  $(".anim").src("stillimage.gif");
});

$(".anim").mouseover(function {
  $(this).src("animatedimage.gif");
});

$(".anim").mouseout(function {
  $(this).src("stillimage.gif");
});

您可能希望有两个数组包含静态和动画GIF的路径，您可以将这些路径分配给每个图像。

Answer 5

您可以通过逐步显示长条纹来解决此问题，例如幻灯片。然后你就可以在任何一帧上停下来。以下示例（http://jsfiddle.net/HPXq4/9/处提供小提琴）：

标记：

 <div class="thumbnail-wrapper">
     <img src="blah.jpg">
 </div>

css：

.thumbnail-wrapper{
   width:190px;
   height:100px;
   overflow:hidden;
   position:absolute;
}
.thumbnail-wrapper img{
   position:relative;
   top:0;
}

js：

var gifTimer;
var currentGifId=null;
var step = 100; //height of a thumbnail
$('.thumbnail-wrapper img').hover(
   function(){
      currentGifId = $(this)
      gifTimer = setInterval(playGif,500);
   },
   function(){
       clearInterval(gifTimer);
       currentGifId=null;
   }
);

var playGif = function(){
   var top = parseInt(currentGifId.css('top'))-step;
   var max = currentGifId.height();
   console.log(top,max)
   if(max+top<=0){
     console.log('reset')
     top=0;
   }
   currentGifId.css('top',top);
}

显然，这可以进一步优化，但为了便于阅读，我简化了这个例子

Answer 6

要重新启动gif图像的动画，可以使用以下代码：

$('#img_gif').attr('src','file.gif?' + Math.random());

Answer 7

在这里找到了可行的解决方案： https://codepen.io/hoanghals/pen/dZrWLZ

JS在这里：

var gifElements = document.querySelectorAll('img.gif');

for(var e in gifElements) {

var element = gifElements[e];

if(element.nodeName == 'IMG') {

    var supergif = new SuperGif({
        gif: element,
        progressbar_height: 0,
        auto_play: false,
    });

    var controlElement = document.createElement("div");
    controlElement.className = "gifcontrol loading g"+e;

    supergif.load((function(controlElement) {
        controlElement.className = "gifcontrol paused";
        var playing = false;
        controlElement.addEventListener("click", function(){
            if(playing) {
                this.pause();
                playing = false;
                controlElement.className = "gifcontrol paused";
            } else {
                this.play();
                playing = true;
                controlElement.className = "gifcontrol playing";
            }
        }.bind(this, controlElement));

    }.bind(supergif))(controlElement));

    var canvas = supergif.get_canvas();     
    controlElement.style.width = canvas.width+"px";
    controlElement.style.height = canvas.height+"px";
controlElement.style.left = canvas.offsetLeft+"px";
    var containerElement = canvas.parentNode;
    containerElement.appendChild(controlElement);

 }
}

Answer 8

Mark Kramer更优雅的版本是：

function animateImg(id, gifSrc){
  var $el = $(id),
    staticSrc = $el.attr('src');
  $el.hover(
    function(){
      $(this).attr("src", gifSrc);
    },
    function(){
      $(this).attr("src", staticSrc);
    });
}

$(document).ready(function(){
  animateImg('#id1', 'gif/gif1.gif');
  animateImg('#id2', 'gif/gif2.gif');
});

甚至更好的方法是使用数据属性：

$(document).ready(function(){
  $('.animated-img').each(function(){
    var $el = $(this),
      staticSrc = $el.attr('src'),
      gifSrc = $el.data('gifSrc');
    $el.hover(
      function(){
        $(this).attr("src", gifSrc);
      },
      function(){
        $(this).attr("src", staticSrc);
      });
  });
});

img el看起来像是：

<img class="animated-img" src=".../img.jpg" data-gif-src=".../gif.gif" />

注意：此代码未经测试但应该可以正常工作。

Answer 9

我所知道的只有一种方法。

有2张图片，首先是带有第一帧（或任何你想要的）gif和实际gif的jpeg。

在jpeg到位的情况下加载页面，在鼠标上方用gif替换jpeg。您可以根据需要预加载GIF，或者如果它们是大尺寸，则在加载gif时显示加载，然后用它替换jpeg。

如果你把它变成双线性的，就像鼠标上的gif播放一样，在鼠标停止时停止它然后从你停止的帧恢复播放，那么用javascript + gif组合就无法做到这一点。

Answer 10

添加这样的后缀：

$('#img_gif').attr('src','file.gif?' + Math.random());

每次用户访问页面时，浏览器都必须下载新图像。此外，可以快速填充客户端缓存。

以下是我在Chrome 49和Firefox 45上测试的替代解决方案在css样式表中，将display属性设置为＆＃39; none＆＃39;，如下所示：

#img_gif{
  display:'none';
}

在＆$ 39; $（文件）.ready＆＃39;之外声明插入：

$(window).load(function(){ $('#img_gif').show(); });

每次用户访问页面时，动画将在完全加载所有元素后启动。这是我发现将gif和html5动画合并的唯一方法。

请注意：
刷新页面后，gif动画不会重新启动（例如按＆＃34; F5＆＃34;）＆＃34; $（文件）.ready＆＃34;声明不会产生相同的效果＆＃34; $（窗口）.load＆＃34;。
该物业＆＃34;能见度＆＃34;没有产生＆＃34;显示＆＃34;。

的相同效果

Answer 11

相关答案，您可以指定gif播放次数。下面的gif具有3个与之关联的播放（10秒计时器，共30秒播放）。自页面加载起经过30秒后，页面停止在“ 0:01”。

刷新页面以重新开始所有3次播放

您必须修改gif本身。在这里找到了一个简单的工具，用于修改GIF播放https://ezgif.com/loop-count。

要查看在登录页面上运行的单循环播放gif的示例，请使用单个播放gif https://git-lfs.github.com/

签出此站点

Answer 12

css过滤器可以阻止gif在chrome浏览器中播放

只需添加

filter: blur(0.001px);

到您的img标签，然后通过chrome性能问题将gif冻结以加载：）

Answer 13

此答案基于Sourabh的答案，他在https://codepen.io/hoanghals/pen/dZrWLZ上指出了完成此工作的HTML / CSS / JavaScript组合。我尝试了这一点，并制作了一个完整的网页，其中包括我在自己的网站上尝试过的CSS和JavaScript。由于CodePens有消失的习惯，因此我决定在这里展示它。我还展示了一个简化的剥离至基本版本，以演示一个人需要做的最少工作。

我还必须注意一件事。上面链接的代码（JavaScript Sourabh复制了该链接）引用了JavaScript构造函数SuperGif()。我不认为Sourabh会解释这一点，CodePen也不会解释。一个简单的搜索显示它是在buzzfeed中定义的/ libgif-js，可以从https://github.com/buzzfeed/libgif-js#readme下载。查找下面的红色箭头指向的控件，然后单击绿色的“代码”按钮。（N.B.您不会看到红色箭头：那是我在向您展示看的地方。）

将弹出一个菜单，提供各种选项，包括下载zip文件。下载它，并将其解压缩到您的HTML目录或其子目录中。

接下来，我将显示我制作的两个页面。第一个是从CodePen派生的。第二个剥离了其基本要素，并显示了使用SuperGif所需的最低要求。

因此，这是第一页的完整HTML，CSS和JavaScript。 HTML的开头是libgif.js的链接，这是您需要的zip文件中的文件。然后，HTML的正文以关于猫图片的一些文本开头，并以https://media.giphy.com/media/Byana3FscAMGQ/giphy.gif处的动画猫GIF的链接开头。

然后继续使用一些CSS。 CodePen使用SCSS，对于任何不知道的人，必须将其预处理为CSS。我已经做到了，所以下面的代码是真正的CSS。

最后是JavaScript。

<html>
<head>
<script src="libgif-js-master/libgif.js"></script> 
</head>

<body>

<div style="width: 600px; margin: auto; text-align: center; font-family: arial">
  <p>
And so, the unwritten law of the internet, that any 
experiment involving video/images must involve cats in 
one way or another, reared its head again. When would 
the internet's fascination with cats come to an end? 
Never. The answer is "Never".
</p> 
  <img src='https://media.giphy.com/media/Byana3FscAMGQ/giphy.gif' class='gif' />
</div>

<style>
img.gif {
  visibility: hidden;
}

.jsgif {
  position: relative;
}

.gifcontrol {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  cursor: pointer;
  transition: background 0.25s ease-in-out;
  z-index: 100;
}
.gifcontrol:after {
  transition: background 0.25s ease-in-out;
  position: absolute;
  content: "";
  display: block;
  left: calc(50% - 25px);
  top: calc(50% - 25px);
}
.gifcontrol.loading {
  background: rgba(255, 255, 255, 0.75);
}
.gifcontrol.loading:after {
  background: #FF9900;
  width: 50px;
  height: 50px;
  border-radius: 50px;
}
.gifcontrol.playing {
  /* Only show the 'stop' button on hover */
}
.gifcontrol.playing:after {
  opacity: 0;
  transition: opacity 0.25s ease-in-out;
  border-left: 20px solid #FF9900;
  border-right: 20px solid #FF9900;
  width: 50px;
  height: 50px;
  box-sizing: border-box;
}
.gifcontrol.playing:hover:after {
  opacity: 1;
}
.gifcontrol.paused {
  background: rgba(255, 255, 255, 0.5);
}
.gifcontrol.paused:after {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 25px 0 25px 50px;
  border-color: transparent transparent transparent #ff9900;
}
</style>

<script>
var gifElements = document.querySelectorAll('img.gif');

for(var e in gifElements) {
  
    var element = gifElements[e];
    
    if(element.nodeName == 'IMG') {
    
        var supergif = new SuperGif({
            gif: element,
            progressbar_height: 0,
            auto_play: false,
        });

        var controlElement = document.createElement("div");
        controlElement.className = "gifcontrol loading g"+e;

        supergif.load((function(controlElement) {
            controlElement.className = "gifcontrol paused";
            var playing = false;
            controlElement.addEventListener("click", function(){
                if(playing) {
                    this.pause();
                    playing = false;
                    controlElement.className = "gifcontrol paused";
                } else {
                    this.play();
                    playing = true;
                    controlElement.className = "gifcontrol playing";
                }
            }.bind(this, controlElement));
        
        }.bind(supergif))(controlElement));
    
        var canvas = supergif.get_canvas();     
        controlElement.style.width = canvas.width+"px";
        controlElement.style.height = canvas.height+"px";
    controlElement.style.left = canvas.offsetLeft+"px";
        var containerElement = canvas.parentNode;
        containerElement.appendChild(controlElement);
    
  }
}
</script>

</body>
</html>

当我将页面放在网站上并显示时，顶部看起来像这样：

当我按下粉红色按钮时，页面切换到了该页面，GIF开始动画。（猫把水从水龙头上掉下来。）

最后，这是第二个简单页面。与第一个不同，它没有精美的播放/暂停控件来改变形状：它只有两个按钮。该代码唯一不需要做的就是禁用任何不相关的按钮，并在按钮之间插入一些空间。

<html>

<head>
<script src="libgif-js-master/libgif.js"></script>
</head>

<body>

<button type="button" onclick="play()"
        id="play_button"
        style="margin-right:9px;"
>
Play
</button>
      
<button type="button" onclick="pause()"
        id="pause_button"
>
Pause
</button>

<img src="https://media.giphy.com/media/Byana3FscAMGQ/giphy.gif" 
     id="gif" 
/>

<script>
var gif_element = document.getElementById( "gif" );
    
var supergif = new SuperGif( {
             gif: gif_element,
                          progressbar_height: 0,
                          auto_play: false
               } );

supergif.load();

function play()
{
  var play_button = document.getElementById( "play_button" );
  play_button.disabled = true;

  var pause_button = document.getElementById( "pause_button" );
  pause_button.disabled = false;
 
  supergif.play();
}

function pause()
{
  var play_button = document.getElementById( "play_button" );
  play_button.disabled = false;

  var pause_button = document.getElementById( "pause_button" );
  pause_button.disabled = true;

  supergif.pause();
}

pause_button.disabled = true;
</script>

</body>
</html>

这加上libgif-js中的example.html文件，应该足以使任何人入门。

停止gif动画onload，在mouseover上启动激活

13 个答案:

更新