刷新页面后GIF图片没有动画 [英] Gif image not animate after refreshing the page

问题描述

我的网站上有一些gif图像，一旦滚动到页面的该部分，我就希望对其进行动画处理.我有一些JavaScript代码，可以隐藏这些gif，然后在到达页面的该部分后立即将其显示.我遇到的问题是，在我滚动到页面的该部分之前，这些gif文件会开始设置动画.我遇到的另一个问题是，刷新页面后，gif有时会进行动画处理，但是我希望它们在每次刷新页面时都进行动画处理.

I have some gif images on my website that I want to animate once you scroll to that part of the page. I have some JavaScript code that hides those gifs then shows them once you get to that part of the page. The issue I am having is that those gifs start animating before I scroll to that part of the page. Another issue I am having is that once I refresh the page the gifs will sometimes animate, but I would like them to animate each time the page gets refreshed.

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

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

This isn't all of the gifs but here's is the portion of my html where my gifs are:

  <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>

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

Here is the .show()/.hide() JavaScript I added to the gifs section:

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

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

I would appreciate it if someone could help me. Thanks in advance.

推荐答案

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

I think the only way to 'control' them would be to reassign the src attribute :

演示

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);
});

---

更新-通过请求一些代码来循环遍历所有动画gifs:

---

Update - by request some code that makes it possible to loop through all animated gifs :

笔

$(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.如果页面仅包含gif，而没有其他<img>标记，则您甚至可以使用$('img')并忽略该类.看起来像很多代码，但是它具有一些反跳和其他优化功能.

It will reinitiate them when they come into view (bottom and top) and fade them out when leaving the screen. All it needs is for the animated gifs to have a common class, assigned to the variable target. If the page contains only gifs and no other <img> tags you could even use $('img') and leave out the class. Looks like quite a bit of code but it has some debouncing and other optimisation.

B-)

这篇关于刷新页面后GIF图片没有动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！