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

Question

I know the fallback image is used when none of sources matches the attribute media.

However, I am trying to do if the media is matched but the scrset wasn't loaded, then the fallback img will be load in case my image somehow missing at least the fallback could be a backup.

or is there any method can be suit this situation?

<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>

Austin737 · Accepted Answer · 2020-05-13 03:49:24Z

This link will be helpful HTMLImageElement.complete

And see a solution here. Note that if the srcset does not load I have set the srcset and src attributes equal to the img src attribute, that way on window resize it does not try to load the missing srcset attribute again. You would also want to update the logic to check for viewport width I am sure, and you could incorporate lodash to debounce, but hopefully this will get you pointed in the right direction:

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>

lucian · Accepted Answer · 2024-04-05 17:57:33Z

0

The short, effective, obtrusive version:

<img [...] onerror="this.srcset=this.src" />

Can't understand why this behaviour isn't simply default spec.

answered Apr 5, 2024 at 17:57

lucian

72111 silver badges22 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related