В Chrome currentSrc элемента img иногда бывает пустым. Как я могу предотвратить это?

Question

ОБНОВИТЬ:

Я только что нашел дополнительную информацию. Кажется, что в Chrome currentSrc изображения часто будет пустым, тогда как в Firefox URL-адрес всегда правильный. JS пытается получить доступ к currentSrc до того, как он станет доступен? Есть ли способ предотвратить это?

---

Я создаю веб-сайт Drupal 8, и чтобы использовать модуль адаптивных изображений с фоновым изображением, я придумал следующее обходное решение. Функция JS ниже, setParallaxImage(), берет currentSrc из img в элементе изображения и устанавливает его в качестве фонового изображения для самого внешнего div. Сам img не отображается (display: none в CSS) и ему предоставляется фиктивное изображение, так как оно мне нужно только для получения currentSrc. Функция вызывается с onload и onresize.

Код, похоже, хорошо работает в Firefox. При изменении размера браузера после точки останова изображение становится серым на долю секунды, а затем загружает изображение из правильного источника. Однако в Chrome при быстром изменении размера после точки останова изображение может стать серым и вообще не отображаться, то есть background-image: url(). Обычно, если я изменяю размер окна еще пару раз, изображение, наконец, появляется. Кто-нибудь знает, почему это может происходить? Спасибо за чтение.

JS

function setParallaxImage() {


    const parallaxContainer = document.getElementsByClassName('paragraph--type--parallax-banner-with-text');

    for(var i = 0; i < parallaxContainer.length; i++) {
      console.log('in setparallax');
      var x = parallaxContainer[i];
      var parallax = x.getElementsByClassName('field--name-field-parallax-image-top-')[0];
      var picture = parallax.getElementsByTagName("picture")[0];
      var sourceURL = picture.querySelector('img').currentSrc;
      x.setAttribute('style', 'background-image: url(' + sourceURL +')');
      var img = picture.getElementsByTagName("img")[0].setAttribute('src', '/sites/default/files/src_images/dummy_image.gif');
    }
  }

window.onload = setParallaxImage
window.onresize = setParallaxImage;

HTML

<div class='paragraph--type--parallax-banner-with-text'>
 <div class='field--name-field-parallax-image-top-'>
  <picture>
   <!-- several source tags here -->
   <img src="will-be-given-dummy-image-in-JS">
  </picture>
 </div>
</div>

Answer 1

Вы можете использовать свойство «завершено», чтобы проверить, было ли изображение уже загружено. Если нет, вы можете использовать onload-Event для запуска, когда изображение доступно.

      if (img.complete) {
    console.log(img.currentSrc);
} else {
    img.onload = function() {
        console.log(img.currentSrc);
    }
}