使用jquery将图像更改为gif

我试图在向下滚动页面时将图像更改为GIF图像。目前我的图像在滚动时会变成gif，但只要再次滚动，gif就会重置。即使您正在滚动，我也希望gif继续播放。使用jquery将图像更改为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'); 
    }; 

});

来源

2016-09-22 Andrew C

你想要的图片只应更换一次？当用户从头到尾第一次滚动时？ –

我将有3个单独的图像，当你滚动每个人应该改变一个gif，当你滚动它的div在 –

是的，我明白了这一点。但是当你再次滚动时，GIF再次加载，这就是你不想要的。对？ –

你的代码是src每次目前重置页面滚动，虽然路径可能不会改变，但会造成图像刷新。

如果尚未更新，则需要将每个src更改为仅更新图像的条件。

2.你if报表采用=代替==，这是行不通的。

做==到窗口的顶部比较元素的顶部是不是要做到这一点的最好办法，只是因为如果您滚动速度不够快，这一事件的机会被调用时，两值是相同的非常苗条。您应该使用>=。

$(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'); 
    }; 

});

来源

2016-09-22 14:28:26 Santi

谢谢！我尝试过，但现在它在开始时播放所有gif，而不是当您滚动到特定的div类 –

@AndrewC这是您之前没有注意到的原始代码的语法问题。你的代码中有'top =（img2Top）'，但是你需要这个'=='而不是'='。我已经修复了我的帖子以反映这一点。 – Santi

好抓！我尝试了更新和第一个图像的作品，但其他人没有。 –

试试这个。我已经初始化了一个变量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++; 
    }; 

});

来源

2016-09-22 14:28:54

谢谢！我试过这个，但现在它开始播放所有的GIF，而不是当你滚动到特定的div类 –

检查更新的答案...错误是在条件..它应该是双等于而不是一个.. –

我会尝试解决这个使用属性在jQuery和一个div在HTML作为触发改变图像源为用户向下滚动页面。

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

来源

2018-01-26 18:49:15

使用jquery将图像更改为gif

回答

相关问题