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提供了幻灯片功能，我正在使用它，它工作得很好。它的工作方式是将每个图像幻灯片用作动态创建的 div 上src的内联样式属性。background-image一切正常。

问题是 UIKit 没有使用提供的适当大小的图像（根据devtoolssrcset中的信息，它也可以正常工作），它只是抓住了后备，因此在移动设备上时获得了相当高分辨率的图像。currentSrcimg src

我正在尝试遍历元素并将内联样式的background-image源替换为currentSrc，但我碰壁了。

该each()方法正在发挥它的魔力，控制台srcset在较小的屏幕上根据适当的源记录较小尺寸的图像，但内联样式的设置无处可去。

所以我错过了一些东西，它可能会很明显很刺眼，但除了睡觉之外，我还需要帮助。

谢谢。

编辑：将代码更新到更好的工作位置，现在只有最后一点不起作用。

4

1 回答 1

0

我编辑了我的第一个答案，因为它完全是胡说八道。

我对您的代码和两个不同大小的图像进行了一些测试，发现它确实有效，但前提是满足某些条件：

我注意到srcset如果缓存中已经有较大的图像，浏览器将不会从该图像中加载较小尺寸的图像。我想它应该以这种方式工作，但您必须牢记这一点并在测试时清除浏览器缓存。

但是，如果您首先调整浏览器窗口的大小，然后清除缓存并重新加载页面，则实际上正在加载较小的图像并将其设置为背景图像。我还必须将您的代码包装在一个setTimeout函数中，否则即使console.log是空的，也没有发生任何事情。对于放大的浏览器窗口，这不是必需的（可能是因为它直接从src标签加载图像，所以没有延迟）。

另一个问题是 uikit 会从标签中设置背景图像，并且src浏览器会在你从srcset小屏幕）。

最干净和最简单的解决方案是修改 uikit 的幻灯片组件。他们只需要将读取图像 url 的部分更改attr('src')为prop('currentSrc').

于 2016-11-21T16:30:24.993 回答