滚动时更改属性但是 return 滚动回顶部时的默认属性

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到return这张图片中当用户向上滚动时？

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

Answer 1

你想要的是 DOM 的变化，而通过 PHP 无法实现，客户端需要 javascript/jquery.

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

1- 有 2 张图片，一张有 class/id noscroll，另一张有 scroll。最初，其中一个是隐藏的（通过在样式属性中添加 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 时，设置一个额外的属性说 "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>

滚动时更改属性但是 return 滚动回顶部时的默认属性

Change attr on scroll But return Default Attr When Scrolled Back To Top

jquery

attr