Тег изображения, предотвращающий манипулирование DOM?

Question

Я использую JavaScript для создания функции для управления 1-кратным и 2-кратным переносом изображений.

У меня есть коллекция изображений, вложенных в тег div для группировки и более эффективного доступа через JavaScript ...

т.е. var rollOverCollectionA = document.getElementById('roll-over-collection-a').querySelectorAll('img');

Но если быть более точным, каждое из этих изображений вложено в тег <picture>. Смотрите ниже:

  <div id="roll-over-collection-a">
    <a href="#">
      <picture>
        <img id="hover-1" src="images/home-page/desktop/EYES_ON_YOU_desktop_HP_NO_HOVER_1.jpg?$staticlink$"
          srcset="/images/home-page/desktop/EYES_ON_YOU_desktop_HP_NO_HOVER_1.jpg?$staticlink$, images/home-page/desktop/EYES_ON_YOU_desktop_HP_NO_HOVER_1@2x.jpg?$staticlink$ 2x"
        />
      </picture>
    </a>
    <a href="#">
      <picture>
        <img id="hover-2" src="images/home-page/desktop/EYES_ON_YOU_desktop_HP_NO_HOVER_2.jpg?$staticlink$"
          srcset="images/home-page/desktop/EYES_ON_YOU_desktop_HP_NO_HOVER_2.jpg?$staticlink$, images/home-page/desktop/EYES_ON_YOU_desktop_HP_NO_HOVER_2@2x.jpg?$staticlink$ 2x"
        />
      </picture>
    </a>
    <a href="#">
      <picture>
       <img id="hover-3" src="images/home-page/desktop/EYES_ON_YOU_desktop_HP_NO_HOVER_3.jpg?$staticlink$" srcset="images/home-page/desktop/EYES_ON_YOU_desktop_HP_NO_HOVER_3.jpg?$staticlink$, images/home-page/desktop/EYES_ON_YOU_desktop_HP_NO_HOVER_3@3x.jpg?$staticlink$ 2x"/>
      </picture>
    </a>
  </div>

И это сценарий:

var on = function(event, elem, callback, capture) {
  if (typeof elem === 'function') {
    capture = callback;
    callback = elem;
    elem = window;
  }
  capture = capture ? true : false;
  elem = typeof elem === 'string' ? document.querySelector(elem) : elem;
  if (!elem) return;
  elem.addEventListener(event, callback, capture);
};

function rollOver(elem) {
  if(document.getElementById(elem).src = `images/home-page/desktop/EYES_ON_YOU_desktop_HP_HOVER_${elem.slice(elem.length-1)}.jpg?$staticlink$`) {
    document.getElementById(elem).src = `images/home-page/desktop/EYES_ON_YOU_desktop_HP_HOVER_${elem.slice(elem.length-1)}.jpg?$staticlink$`
  }
  if (
    (document.getElementById(
      elem
    ).srcset = `images/home-page/desktop/EYES_ON_YOU_desktop_HP_HOVER_${elem.slice(
      elem.length - 1
    )}@2x.jpg?$staticlink$`)
  ) {
    document.getElementById(
      elem
    ).srcset = `images/home-page/desktop/EYES_ON_YOU_desktop_HP_HOVER_${elem.slice(
      elem.length - 1
    )}@2x.jpg?$staticlink$`;
  }

}

function rollOut(elem) {
  if (document.getElementById(elem).src = `images/home-page/desktop/EYES_ON_YOU_desktop_HP_NO_HOVER_${elem.slice(elem.length-1)}.jpg?$staticlink$`){
    document.getElementById(elem).src = `images/home-page/desktop/EYES_ON_YOU_desktop_HP_NO_HOVER_${elem.slice(elem.length-1)}.jpg?$staticlink$`
  }
  if (
    (document.getElementById(
      elem
    ).srcset = `/images/home-page/desktop/EYES_ON_YOU_desktop_HP_NO_HOVER_${elem.slice(
      elem.length - 1
    )}@2x.jpg?$staticlink$`)
  ) {
    document.getElementById(
      elem
    ).srcset = `images/home-page/desktop/EYES_ON_YOU_desktop_HP_NO_HOVER_${elem.slice(
      elem.length - 1
    )}@2x.jpg?$staticlink$`;
  }

}
document.addEventListener("DOMContentLoaded", function(event) {
  var rollOverCollectionA = document.getElementById('roll-over-collection-a').querySelectorAll('img');
      rollOverCollectionA = Array.prototype.slice.apply(rollOverCollectionA);
    console.log(rollOverCollectionA);
      for (let i = 0; i < rollOverCollectionA.length; i++) {
       on('mouseover', `#${rollOverCollectionA[i].id}`, function(){
         rollOver(rollOverCollectionA[i].id);
       });
       on('mouseout', `#${rollOverCollectionA[i].id}`, function(){
        rollOut(rollOverCollectionA[i].id);
       }); 
      }
});

Сценарий, кажется, работает, т. Е. Ролловеры изображений успешно выполняются, когда элемент img не вложен в тег picture, но когда тег img вложен в тег picture, он не работает, т.е. неудачные ролловеры.

Проверка console.log(rollOverCollectionA); Я вижу, что коллекция элементов изображения, но я понял, что есть недостатки в моих rollOver & rollOut функциях.

Как я понял, я проверяю, действительно ли существует атрибут srcset и его значение. То, что я хотел бы, это способ узнать, загрузил ли атрибут изображения 2x в браузере.

Примечание:

Я попытался удалить каждый из img тегов из picture tags, и это работает!

Любая помощь будет оценена!