在 Chrome 中，img 元素的 currentSrc 有時為空。 我怎樣才能防止這種情況？

Question

更新：

我剛剛找到了更多信息。 在 Chrome 中，圖像的 currentSrc 似乎經常為空，而在 Firefox 中，URL 總是正確的。 JS 是否試圖在 currentSrc 可用之前訪問它？ 有沒有辦法防止這種情況？

---

我正在創建一個 Drupal 8 網站，為了使用帶有背景圖像的響應式圖像模塊，我想出了以下解決方法。 下面的JS function，setParallaxImage()，從圖片元素中的img中獲取currentSrc，設置為最外層div的background-image。 img 本身不顯示（在 CSS 中顯示：none）並給出了一個虛擬圖像，因為我只需要它來獲取 currentSrc。 使用 onload 和 onresize 調用 function。

該代碼似乎在 Firefox 中運行良好。 調整瀏覽器大小超過斷點時，圖像會在一瞬間變灰，然后從正確的源加載圖像。 但是，在 Chrome 中，當快速調整大小超過斷點時，圖像可能會變灰並且根本不顯示，即 background-image: url()。 通常，如果我再多次調整 window 的大小，圖像最終會出現。 有誰知道為什么會發生這種情況？ 感謝您的閱讀。

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);
    }
}