В Chrome currentSr c элемента img иногда бывает пустым. Как я могу предотвратить это? - PullRequest
Новая
       36

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

1 голос
/ 07 мая 2020

ОБНОВЛЕНИЕ:

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

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

...