使用jquery将图像更改为滚动的gif

时间:2016-09-22 14:19:08

标签: jquery html

当您向下滚动页面时,我正尝试将几个图像更改为GIF。目前我在滚动时将图像更改为gif,但只要再次滚动,gif就会重置。即使你在滚动,我也希望gif继续播放。

这是我的jquery:

  $(window).scroll(function(){
  var top = $(window).scrollTop();

  var img1Top = $('.wrap').offset().top;
  if(img1Top){
    $('.wrap').attr('src','../wrap.gif');
  };


  var img2Top = $('.vest').offset().top;
  if(top=(img2Top)){
    $('.vest').attr('src','../vest.gif');
  };

  var img3Top = $('.loop').offset().top;
  if(top=(img3Top)){
    $('.loop').attr('src','../loop.gif');
  };

});

3 个答案:

答案 0 :(得分:1)

1。每次页面滚动时,您的代码正在重置src,虽然路径可能没有变化,但会导致图片刷新。

您需要将每个src更改包装在条件中,只有在尚未更新时才更新图像。

2。您的if语句正在使用=而不是==,这些语句无法正常使用。

3。执行==将窗口顶部与元素顶部进行比较并不是最好的方法,只是因为如果你滚动得足够快,那么机会很大当两个值相同时调用此事件的非常超薄。您应该使用>=代替。

$(window).scroll(function(){
  var top = $(window).scrollTop();

  var img1Top = $('.wrap').offset().top;
  if(img1Top && $('.wrap').attr('src') != '../wrap.gif'){
    $('.wrap').attr('src','../wrap.gif');
  };


  var img2Top = $('.vest').offset().top;
  if(top >= img2Top && $('.vest').attr('src') != '../vest.gif'){
    $('.vest').attr('src','../vest.gif');
  };

  var img3Top = $('.loop').offset().top;
  if(top >= img3Top && $('.loop').attr('src') != '../loop.gif'){
    $('.loop').attr('src','../loop.gif');
  };

});

答案 1 :(得分:1)

试试这个。 我初始化了一个变量changed,并在每个gif的加载时递增它并检查每个条件中的变化变量,如下所示。所以每个gif只会加载一次而不会重复。

var changed = 0;
$(window).scroll(function(){
    var top = $(window).scrollTop();

    var img1Top = $('.wrap').offset().top;
    if(img1Top && changed != 1){
        $('.wrap').attr('src','../wrap.gif');
        changed++;
    };


    var img2Top = $('.vest').offset().top;
    if(top==(img2Top) && changed != 2){
        $('.vest').attr('src','../vest.gif');
        changed++;
    };

    var img3Top = $('.loop').offset().top;
    if(top==(img3Top) && changed != 3){
        $('.loop').attr('src','../loop.gif');
        changed++;
    };

});

答案 2 :(得分:0)

我会尝试使用Jquery中的属性和HTML中的div作为触发器来解决此问题,以便在用户向下滚动页面时更改图像源。

<强> HTML:

<div id="trigger"></div><img src="JPG_URL_HERE" />

<强> JQuery的:

$(function() {
  var $window = $(window);
  var endpoint = $("#trigger").offset().top - $window.height();
  $window.on('scroll', function() {
    if ((endpoint) < $window.scrollTop()) {
      $("img[src='JPG_URL_HERE']").attr("src", "GIF_URL_HERE");
    }
  });
});

我为您创建了一个示例 here