当您向下滚动页面时,我正尝试将几个图像更改为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');
};
});
答案 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