在滚动时改变attr，但当滚动到顶部时返回默认attr。

Question

我想在滚动时改变一个图片的URL，我可以用这个jQuery做一个新的图片，这个图片只在滚动时显示，名为scroll.png。

        $( '.div img' ).attr( 'src',"scroll.png" );

    } else {

        $( '.div img' ).attr( 'src',"no-scroll.png" );

    }

然而，我需要删除它时，我可以使用这个。

$( '.div img' ).attr( 'src',"no-scroll.png" );

然而，我想知道的是，我可以使用另一种方法来显示原来的图像，而不是把它添加到jQuery中，因为它已经用PHP代码添加，所以我不想用jQuery把它添加回来。

我想的是这样的。

  $( '.div img' ).attr( 'src',"scroll.png" );

} else {

    $( '.div img' ).removeAttr( 'src',"no-scroll.png" );

}

但是当我使用removeAttr的时候，它删除了用PHP代码添加的默认图片，所以也许我需要使用类似return的东西。

更新。 默认的html包含了一个加载的属性，也许可以在jQuery中使用这个属性在用户向上滚动时返回这个图片？

<img src="scroll.png" loading="lazy">

Answer 1

你想要的是DOM的变化，这在PHP中是无法实现的，客户端需要使用javascriptjquery。

你可以通过jquery的多种方式来实现。

1- 有2张图片，一张有classid noscroll，另一张有scroll。初始时，其中一张是隐藏的（通过在样式attr中添加display:none或在jquery中添加.hide()），另一张是显示的。当你滚动时，你可以切换它们的显示值。

<div class="div">
    <img src="no-scroll.png" id="no-scroll">
    <img src="scroll.png" id="scroll" style="display: none">
</div>


<script type="text/javascript">
    if(someScrollEvent){
        $('.div #scroll').show();
        $('.div #no-scroll').hide();
    } else {
        $('.div #scroll').hide();
        $('.div #no-scroll').show();
    }
</script>

2- 通过PHP，当加载图片并设置它们的src时，设置一个额外的attr，比如说 "initial-src "等于图片的初始src，然后当你把src改为无滚动并想要回原始src时，你把它设置为初始src attr值。

<div class="div">
    <img src="no-scroll.png" initial-src="no-scroll.png">
</div>


<script type="text/javascript">
    if(someScrollEvent){
        $('.div img').attr('src',"scroll.png");
    } else {
        $('.div img').attr('src',$('.div img').attr("initial-src"));
    }
</script>