javascript - jQuery を使用して UIKit のスライドショーのソース画像を srcset に基づくレスポンシブな画像に置き換える

Question

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にはスライドショー機能があり、私はそれを使用していますが、問題なく動作します。これが機能する方法は、各画像スライドを動的に作成された divsrcのインラインbackground-imageスタイル属性として使用することです。すべて正常に動作します。

問題は、UIKit が提供された適切なサイズの画像を使用しないことですsrcset(これはcurrentSrc、devtools の情報に従って正しく機能しています)。単にフォールバックimg srcを取得するため、モバイルではかなり高解像度の画像になります。

background-image要素をループしてインライン スタイルのソースを に置き換えようとしていますcurrentSrcが、壁にぶつかっています。

メソッドは魔法のeach()ように動作し、コンソールは小さい画面で適切なソースに基づいて小さいサイズの画像をログに記録しsrcsetますが、インライン スタイルの設定はどこにも行きません。

だから私は何かが欠けています、そしてそれはおそらく明白でギラギラするでしょうが、睡眠に加えて私は助けが必要です.

ありがとう。

編集:コードをより適切な作業場所に更新しましたが、現在は最後のビットのみが機能していません。