0

HTML:

<div id="rb-hero" class="rb-hero uk-block uk-flex uk-flex-middle uk-contrast arrowed">
 <ul class="uk-slideshow uk-slideshow-fullscreen" id="biggie_slides" data-uk-slideshow="{pauseOnHover: false, autoplay:true}">
  <li><img src="{theUrlMedium}" alt="{theAltText}" srcset="{theUrlSmall} 750w, {theUrlMedium} 1200w, {theUrlLarge} 2000w, {theUrlXL} 3000w" ></li>
 </ul>
</div>

jQuery:

$('#rb-hero li img').each(function() {
 var theSrc = $(this).prop('currentSrc');
 // console.log(theSrc);
 $(this).prev('div').attr('style', 'background-image: url( '+theSrc+' )');
});

UIKit provides a slideshow function, and I have it in use and it works just fine. The way it works is to use each image slide's src as an inline background-image style attribute on a dynamically-created div. All works fine.

The problem is that UIKit does not use the appropriately-sized image from the provided srcset (which is also working correctly per the currentSrc info in devtools), it simply grabs the fallback img src and thus a pretty high-res image when on mobile.

I'm trying to loop through the elements and replace the inline style's background-imagesource with the currentSrc, but I'm hitting a wall.

The each() method is doing its magic and the console logs the smaller-sized image based on the appropriate srcset source at smaller screens, but the setting of the inline style is going nowhere.

So I'm missing something, and it's probably going to be obvious and glaring but in addition to sleep I need an assist.

Thanks.

Edit: Updated code to a better working place and now only the final bit's not working.

Community
  • 1
  • 1
dashard
  • 877
  • 1
  • 10
  • 17

1 Answers1

0

I edited my first answer as it was complete nonsense.

I did some testing with your code and two differently sized images and found that it actually works, but only if certain conditions are met:

I noticed that the browser won't load a smaller sized image from the srcset if there's a larger one already in the cache. I guess it's meant to work this way, but you'll have to keep that in mind and clear the browser cache while testing.

But if you first resize your browser window, then clear the cache and reload the page, the smaller images actually are being loaded and set as background images. I also had to wrap your code in a setTimeout function, otherwise even the console.log was empty and nothing happened. This wasn't necessary with an enlarged browser window (probably because it loaded the image straight from the src tag so there was no delay).

Another problem is that uikit will have set the background image from the src tag and the browser will have loaded it before you set the image url from the srcset, so you'll load both files (which is even worse than only loading the large one on a small screen).

The cleanest and easiest solution would be to modify uikit's slideshow component. They only had to change the part where the image url is read from attr('src') to prop('currentSrc').

team-ok
  • 1
  • 2