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

回答

相關問題