img srcset 未加载时是否可能，然后回退 img src？

Question

我知道当 none 个来源与属性媒体匹配时使用后备图像。

但是，如果媒体匹配但未加载 scrset，我将尝试执行此操作，然后将加载后备 img，以防我的图像以某种方式丢失至少后备可能是备份。

或者有什么方法可以适合这种情况？

<picture>
 <source media="(min-width: 320px)" srcset="/img/not-exist.jpg">
 <img src="https://images.unsplash.com/photo-1519455953755-af066f52f1a6?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=634&q=80" alt="this is img">
</picture>

Answer 1

这个link会有帮助HTMLImageElement.complete

并在此处查看解决方案。请注意，如果 srcset 未加载，我已将 srcset 和 src 属性设置为等于 img src 属性，这样 window resize 它不会尝试再次加载丢失的 srcset 属性。您还想更新逻辑以检查视口宽度，我敢肯定，您可以合并 lodash 来消除抖动，但希望这会让您指向正确的方向：

window.onload = function(){
  var parent = document.getElementById("parent-element");
  var source = parent.querySelector("source");
  var img = parent.querySelector("img");
  var srcset = source.getAttribute("srcset");
  var src = img.getAttribute("src");
  if(!srcset.complete){
    source.setAttribute("srcset", src);
    img.setAttribute("src", src);
  }
}

<picture id="parent-element">
 <source media="(min-width: 320px)" srcset="/img/not-exist.jpg">
 <img src="https://images2.minutemediacdn.com/image/upload/c_fill,g_auto,h_1248,w_2220/v1584388937/shape/mentalfloss/536413-gettyimages-1077470274.jpg?itok=NoDcW5uz" alt="this is img">
</picture>

img srcset 未加载时是否可能，然后回退 img src？

is possible when img srcset not loaded, then fallback img src?

html

image

srcset