jqueryのスクロールで画像をgifに変更する

Question

ページを下にスクロールするときに、いくつかの画像を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'); 
    }; 

}); 

Answer 1

1.あなたのコードは、現在srcたびにリセットされているページがスクロールし、パスが変更されないかもしれないが、それは画像が更新されます。

がまだ更新されていない場合は、srcの変更を条件付きでラップする必要があります。。

2.あなたifステートメントは機能しません=の代わり==を、使用しています。要素の先頭に、ウィンドウの上部を比較する==を行う

3.は、あなたが十分に速くスクロールする場合は、このイベントの可能性がときに、2つ呼び出されるだけであるため、これを行うための最善の方法ではありません値は同じです非常にスリムです。代わりに>=を使用してください。

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

}); 

Answer 2

これで試してください。 私は変数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++; 
    }; 

}); 

Answer 3

私はページ下にユーザーがスクロールなどの画像ソースを変更するトリガーとして、HTMLでのjQueryで、この使用して属性と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