Изменить атрибут при прокрутке, но вернуть атрибут по умолчанию при прокрутке вверх - PullRequest
Новая
       39

Изменить атрибут при прокрутке, но вернуть атрибут по умолчанию при прокрутке вверх

0 голосов
/ 17 июня 2020

Я пытаюсь изменить 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">

1 Ответ

1 голос
/ 17 июня 2020

Что вам нужно, так это изменения DOM, которые не могут быть достигнуты с помощью PHP, на стороне клиента требуется javascript / jquery.

Вы можете подойти к этому разными способами, используя jquery.

1 - Есть 2 изображения, одно с классом / идентификатором noscroll, а другое с scroll. Первоначально один из них скрыт (добавлением display: none в стиле attr или .hide () в jquery), а другой отображается. При прокрутке вы переключаете их отображаемое значение. 

<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 при загрузке изображения и установке их sr c, установите дополнительный атрибут, скажем, "initial-sr c" равно начальный sr c для изображения, затем, когда вы меняете sr c на no scroll и хотите вернуть исходный sr c, вы устанавливаете его как значение initial-sr c 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>
...