在Chrome中，img元素的currentSrc有时是空的.我该如何防止这种情况发生

Question

更新：

我刚刚找到更多信息。在Chrome中，图像的currentSrc似乎经常是空的，而在Firefox中，URL总是正确的。JS是否试图在currentSrc可用之前访问它？有办法防止这种情况发生吗？

---

我正在创建一个Drupal 8网站，为了使用带有背景图像的响应图像模块，我想出了以下解决方法。下面的JS函数setParallaxImage((从picture元素中的img中获取currentSrc，并将其设置为最外层div的背景图像。img本身不显示(在CSS中显示：none(，并被赋予一个伪图像，因为我只需要它来获取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);
}
}