小编Sea*_*ean的帖子

更新：

我刚刚找到了一些更多信息。看来在 Chrome 中，图像的 currentSrc 通常是空的，而在 Firefox 中，URL 总是正确的。JS 是否在 currentSrc 可用之前尝试访问它？有办法防止这种情况吗？

我正在创建一个 Drupal 8 网站，为了将响应式图像模块与背景图像一起使用，我想出了以下解决方法。下面的 JS 函数 setParallaxImage() 从图片元素中的 img 中获取 currentSrc，并将其设置为最外层 div 的背景图像。img 本身不显示（CSS 中的 display: 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 +')'); …

我正在学习React,这是我第一次处理异步操作.目前我正在构建一个简单的计算器,并在使用setState后遇到一些小问题,然后立即尝试访问该状态.解决问题很容易,因为我的应用非常简单.但是,在调用setState确定状态实际已更新之后,我无法找到确定的规则.它需要一定的时间吗？它取决于我的代码结构吗？另外,为了给状态时间更新,在setState之后使用setTimeout是否合适？如果有人能够让我了解React何时更新状态并节省我的猜测,我们将不胜感激.