猫头鹰轮播:不将 data-src 值拉为 Vimeo 视频的 CSS 中的背景图像
Posted
技术标签:
【中文标题】猫头鹰轮播:不将 data-src 值拉为 Vimeo 视频的 CSS 中的背景图像【英文标题】:Owl carousel: not pulling data-src value as background image in CSS for Vimeo videos 【发布时间】:2016-05-21 11:18:22 【问题描述】:我正在使用 Owl Carousel 来显示 YouTube 和 Vimeo 视频,YouTube 视频显示了它们对应的缩略图,但 Vimeo 视频没有。我查看了源代码并注意到 Owl 的 js 似乎在 data-src 属性中提取图像的 URL。对于 YouTube 视频,它采用 data-src 值并将其应用为 div 的背景图像(通过 css)。对于 Vimeo 视频,它会拉入 data-src,但不会将其应用于 div 的 css。下面以sn-p的代码为例:
<div class="owl-item cloned" data-video="https://www.youtube.com/watch?v=9RBOvGwQ4To" style="width: 580px; margin-right: 10px;">
<div class="item-video" data-merge="2">
<div class="owl-video-wrapper">
<a class="owl-video" href="https://www.youtube.com/watch?v=9RBOvGwQ4To" style="display: none;"></a>
<div class="owl-video-play-icon"></div>
<div class="owl-video-tn owl-lazy" data-src="http://img.youtube.com/vi/9RBOvGwQ4To/hqdefault.jpg" style="background-image: url("http://img.youtube.com/vi/9RBOvGwQ4To/hqdefault.jpg"); opacity: 1;"></div>
</div>
</div>
</div>
<div class="owl-item active center" data-video="https://player.vimeo.com/video/143757230" style="width: 580px; margin-right: 10px;">
<div class="item-video" data-merge="2">
<div class="owl-video-wrapper">
<a class="owl-video" href="https://player.vimeo.com/video/143757230" style="display: none;"></a>
<div class="owl-video-play-icon"></div>
<div class="owl-video-tn owl-lazy" data-src="https://i.vimeocdn.com/video/541423305_640.jpg"></div>
</div>
</div>
</div>
顶部的 .owl-item 是 YouTube 视频,底部是 Vimeo 视频。您会在 .owl-video-tn div 中看到差异。
我尝试了几个似乎不起作用的 jQuery 变通方法。 (也许我做错了什么?)这是我迄今为止尝试过的:
if ($("div[data-src*='vimeocdn']"))
var imageUrl = $(".owl-video-tn").attr("data-src")
$('.owl-video-tn').css('background-image', 'url(' + imageUrl + ')':'background-repeat', 'no-repeat':'background-position','left top');
$("div[data-src*='vimeocdn']").each(function ()
var imageUrl = $(".owl-video-tn").attr("data-src")
$(this).css('background-image', 'url(' + imageUrl + ')':'background-repeat', 'no-repeat':'background-position','left top');
);
$("div[data-src*='vimeocdn']").each(function ()
var $img = $("div[data-src*='vimeocdn']");
$(this).css('background-image', 'url('+ $img +')':'background-repeat', 'no-repeat':'background-position','left top');
);
想法?建议?对我的 jQuery 进行更正?
【问题讨论】:
【参考方案1】:事实证明,我根本不需要 jQuery 解决方法。我启用了“lazyLoad”选项,禁用它解决了我的问题。
【讨论】:
以上是关于猫头鹰轮播:不将 data-src 值拉为 Vimeo 视频的 CSS 中的背景图像的主要内容,如果未能解决你的问题,请参考以下文章