在滚动时更改属性但在滚动回顶部时返回默认属性

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

你想要的是无法通过 PHP 实现的 DOM 更改，客户端需要 javascript/jquery。

您可以通过 jquery 以多种方式解决此问题。

1- 有 2 张图片，一张有 class/id noscroll，另一张有滚动。最初，其中一个是隐藏的（通过在样式 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 回到你将其设置为 initial-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>