Loading issues related to <picture> elements?

[spookiyu]

My slider loads just fine at first, but from the second load (whether you go to another page and come back, refresh, etc.) you get an eternal loading symbol.

The really weird thing is that you can fix it by resizing the page? There's a breakpoint at 600px wide where the <picture> selects a different image source, and if you resize the window past that point, it fixes the slider completely. It seems the bxSlider isn't adding the necessary tags to my slider div until that resize (see the images below).

I restructured my site some time ago to use these <picture> elements with the breakpoints; I believe it didn't break until very recently, but I could be wrong.

Before resizing:

After resizing:

[vyvrhel]

In Firefox (since version 131.0), when bxSlider contains an <img> inside a <picture> element, the code responsible for the callback after image preload fails. The load/error events are not dispatched, and this.complete returns false.

selector.find('img:not([src=""]), iframe').each(function() {
  $(this).one('load error', function() {
    if (++count === total) { callback(); }
  }).each(function() {
    if (this.complete || this.src == '') { $(this).trigger('load'); }
  });
});

[spookiyu]

Aha, thank you so much for the explanation! Sorry I'm a huge amateur, but is this code block a fix? I tried copypasting it and changing selector to $(.slider), and it doesn't seem to have done anything.

[vyvrhel]

Aha, thank you so much for the explanation! Sorry I'm a huge amateur, but is this code block a fix? I tried copypasting it and changing selector to $(.slider), and it doesn't seem to have done anything.

I'm not offering a solution to the problem; I just wanted to clarify what the issue is and in which part of the library's code it occurs, as I'm dealing with it too.

Maybe it's not even a problem with bxSlider, but with Firefox—I don't know.

[Webzeugmacher]

Firefox now seems to set img.complete on the next frame. Temporary Bugfix that works for us, is to use setTimeout or requestAnimationFrame to delay the complete-Test

}).each(function() {
  setTimeout(() => {
    if (this.complete || this.src == '') { $(this).trigger('load'); }
  }, 0);
});