Остановка gif анимации, когда gif находится вне поля зрения?

Question

[Чёкатилло]

Есть в природе скрипт такого рода, но я не замечу что он работает. Хз не пойму. Мой сайт на Вордпресс
Что делается не так?

$(window).on('load', function () {
  
  var windowHeight = $(window).height();
  var windowScroll = $(window).scrollTop();  
  var offset;
  var src;
  
  //перебираем все img на странице
  $('img').each(function(){
    
    offset = $(this).offset()['top'];
    
    //Если отступ img от верха больше, чем прокурутка страницы + высота     экрана,
    //то добавляем к scr stopped и класс stopped
    if(offset > (windowHeight + windowScroll)){
      src = $(this).attr('src');
      $(this).attr('src', src.replace('.gif', '_stopped.gif'));
      $(this).addClass('stopped');
    }

  });

 // При прокрутке проверяем, если элемент попал в зону видимости, то удаляем
 // у src часть stopped, тем самым заменяя его на оригинальный и удаляем класс
  $(window).on('scroll', function () {
    
    $('img').each(function(){
    
      offset = $(this).offset()['top'];
    
      if(offset > (windowHeight + windowScroll)){
        if($(this).hasClass('stopped')){
          $(this).removeClass('stopped')
          src = $(this).attr('src');
          $(this).attr('src', src.replace('_stopped.gif', '.gif'));
        }
      }

    });
    
  });
  
});

Может есть что-то еще у кого? Какие-то варианты
Спасибо!

Comments

[Максим Тимофеев]

а в сss для .stopped что?

[Stalker_RED]

Максим Тимофеев: а какая разница, он src меняет.
Дмитрий а как вы определили что он не работает?

[Чёкатилло]

Максим Тимофеев: эмм ничего А что должно быть? ))

[xmoonlight]

Максим Тимофеев: да типа флага для js.... у него нет стиля, т.к. он ему не нужен.

[Чёкатилло]

Stalker_RED: за счет изменения src он должен работать як-то так

[Чёкатилло]

Stalker_RED: фиг его знает как Через F12 смотрел не меняет )

[Чёкатилло]

Stalker_RED: так это..он рабочий, как думаете?

[Stalker_RED]

Дмитрий: с виду похож на рабочий. попробуйте запилить тестовую страничку на jsfiddle, например.

[Stalker_RED]

Stalker_RED: Он рабочий, но делает не совсем то, что у вас в задаче.
Он изначально всем картинкам подменяет src на stopped, а когда к ним доскролливаешь - меняет на правильный. И больше картинку не убирает.
https://jsfiddle.net/cvx0fuoh/

[Чёкатилло]

Stalker_RED: ну вот https://jsfiddle.net/ksmxyfhL/ Не могу распознать вроде ниче не останавливает не заменяет

Answer 1

[Максим Тимофеев]

В вашем примере ка-бы все ок, и все должно работать, но видимо где-то синтаксис. Не закрыто и т.д. У вас там each не работает точно, а точнее
$(window).on('scroll'

Comments

[Чёкатилло]

исправил пример https://jsfiddle.net/p4btwmeh/

[Максим Тимофеев]

Дмитрий: вот это:

if(offset > (windowHeight + windowScroll)){
      src = $(this).attr('src');
      $(this).attr('src', src.replace('.gif', '_stopped.gif'));
      $(this).addClass('stopped');
    }

срабатывает только при загрузке страницы и соответственно никогда не выполняется, вторая часть с
if($(this).hasClass('stopped')){
Работает, но так как первая не срабатывает - не выполняется условие никогда

[Чёкатилло]

Максим Тимофеев: короче не работает )

[Максим Тимофеев]

Дмитрий: Все не правильно потому что

[Максим Тимофеев]

Надо изначально создавать html с нерабочими картинками, потом проверять попадают ли в видимость и включать. Обратная логика

[Чёкатилло]

Максим Тимофеев: значит что-то тут исправить надо?
if(offset > (windowHeight + windowScroll)){
src = $(this).attr('src');
$(this).attr('src', src.replace('.gif', '_stopped.gif'));
$(this).addClass('stopped');
}

не можете помочь с этим?

[Чёкатилло]

Максим Тимофеев: аааааааа О эт уже сложно для меня

[Stalker_RED]

Дмитрий:

короче не работает )

Работает, и делает то, для чего задумывался. Просто вы неправильно поняли его описание.

Он изначально всем картинкам подменяет src на stopped, а когда к ним доскролливаешь - меняет на правильный. И больше картинку не убирает.

Answer 2

[xmoonlight]

Есть вот такая штука!
С помощью неё - реальнее всего сделать.

Comments

[Чёкатилло]

чет не пойму что это )