刷新页面后gif图像没有动画

Question

我的网站上有一些 gif 图像，一旦您滚动到页面的该部分，我想将其制作成动画。我有一些 JavaScript 代码可以隐藏这些 gif，然后在您到达页面的那个部分时显示它们。我遇到的问题是，在我滚动到页面的那部分之前，这些 gif 开始动画。我遇到的另一个问题是，一旦我刷新页面，gif 有时会动画，但我希望它们在每次刷新页面时都动画。

这是我网站的链接：http://lam-parker.github.io/my_portfolio_website/

这不是所有的 gif，但这是我的 html 中我的 gif 所在的部分：

  <div class="row4">
        <h1 id="title3">Software Skills</h1>
           <div class="col-md-2 col-sm-4 col-xs-6">
               <img src="img/software-skills/photoshop.gif">
           </div>
           <div class="col-md-2 col-sm-4 col-xs-6">
               <img src="img/software-skills/indesign.gif">
           </div>
     </div>

这是我添加到 gif 部分的 .show()/.hide() JavaScript：

$(window).scroll(function() {
  if ($(window).scrollTop() > 70) {
    $('.row4').show("slow");
  } else {
    $('.row4').hide();
  }
});

如果有人可以帮助我，我将不胜感激。提前致谢。

Answer 1

我认为“控制”它们的唯一方法是重新分配 src 属性：

Demo

img {
  opacity: 0;
}

$(window).scroll(function() {

  var current = $(this).scrollTop(),
  path = 'animated.gif',
  visible = $('img').css('opacity') != 0;

  if (current > 200) {
  if (!visible) $('img').attr('src', path).fadeTo(400,1);
  }
  else if (visible) $('img').fadeTo(0,0);
});

---

更新 - 通过请求一些代码可以循环播放所有动画 gif ：

Pen

$(function() {

    var target = $('.anigif'),
    path = [], zenith, nadir, current,
    modern = window.requestAnimationFrame;

    target.each(function() {

        path.push(this.src);
    });

    $(window).on('load resize', storeDimensions).on('load scroll', function(e) {

        current = $(this).scrollTop();

        if (e.type == 'load') setTimeout(inMotion, 150);
        else inMotion();

    function inMotion() {

        if (modern) requestAnimationFrame(checkFade);
        else checkFade();
    }
    });

function storeDimensions() {

    clearTimeout(redraw);

    var redraw = setTimeout(function() {

        zenith = []; nadir = [];

        target.each(function() {

            var placement = $(this).offset().top;

            zenith.push(placement-$(window).height());
            nadir.push(placement+$(this).outerHeight());
        });
    }, 150);
}

function checkFade() {

    target.each(function(i) {

        var initiated = $(this).hasClass('active');

        if (current > zenith[i] && current < nadir[i]) {
        if (!initiated) $(this).attr('src', path[i]).addClass('active').fadeTo(500,1);
        }
        else if (initiated) $(this).removeClass('active').fadeTo(0,0);
    });
}
});

当它们进入视野（底部和顶部）时，它将重新启动它们，并在离开屏幕时将它们淡出。它所需要的只是让动画 gif 有一个公共类，分配给变量 target。如果页面只包含 gifs 而没有其他 <img> 标签，您甚至可以使用 $('img') 并忽略该类。看起来相当多的代码，但它有一些去抖动和其他优化。

B-)

Answer 2

您需要使用 CSS opacity 1 或 0 来显示或隐藏您的元素。这只是“老派”的方式。第二件事是使用相对位置并移出屏幕。您也可以将图像从原始大小调整为 1x1px 到原始大小，但这是一种不好的方式。