带有Vimeo的Flexslider 2无法正确加载Chrome
[英]Flexslider 2 with vimeo not loading correctly chrome
问题描述
我在一个网站上有一个页面，该页面上有一个包含5张图片幻灯片和5张视频幻灯片的flexslider。 该滑块可在IE和Firefox中完美加载，但在Chrome中，该滑块可能需要大约一分钟的时间才能显示出来，并且通常在您调整浏览器窗口大小或单击页面后才会加载。
这里是网站链接： http : //10.scopus.com/people.php
编辑：
我刚刚注意到的另一点是，如果您调整浏览器窗口的大小，它似乎会立即加载
编辑：
这是我的页面代码
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Scopus 10</title>
<meta name="viewport" content="width=device-width">
<link rel="icon"
type="image/icon"
href="http://live.scopus10.mkt/favicon.ico" />
<link rel="stylesheet" href="assets/css/flexslider.css" media="all">
<link rel="stylesheet" href="assets/master.css" media="all">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="assets/js/s.js"></script>
<script type="text/javascript" src="assets/js/jquery.flexslider.js"></script>
<script type="text/javascript" src="assets/js/jquery.fitvid.js"></script>
<script src="http://f.vimeocdn.com/js_opt/froogaloop2.min.js?bfeb60ee"></script>
<!--[if IE]>
<script type="text/javascript" src="assets/js/modernizr.js"></script>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
<![endif]-->
</head>
<body class="peoplevid loading">
<?php include('includes/header.php'); ?>
<div class="first row">
<div class="six columns"> <a href="#" class="active oliver">
<div class="overlay"></div>
<div class="wrap"><img src="assets/images/people/oliver-dumon.jpg" alt="Oliver Dumon" /></div><div class="box"><span class="number">01</span><span class="dots">••••••</span><span class="name">Olivier<br />Dumon</span></div><div class="arrow"></div></a></div>
<div class="six columns"> <a href="#" class="nick">
<div class="overlay"></div>
<div class="wrap"><img src="assets/images/people/nick-fowler.jpg" alt="Nick Fowler" /></div><div class="box"><span class="number">02</span><span class="dots">••••••</span><span class="name">Nick<br />Fowler</span></div><div class="arrow"></div></a> </div>
<div class="six columns"> <a href="#" class="mhamed">
<div class="overlay"></div>
<div class="wrap"><img src="assets/images/people/mhamed-el-aisati.jpg" alt="M'hamed El Aisati" /></div><div class="box"><span class="number">03</span><span class="dots">••••••</span><span class="name">M'hamed<br />El Aisati</span></div><div class="arrow"></div></a> </div>
<div class="six columns"> <a href="#" class="lisa">
<div class="overlay"></div>
<div class="wrap"><img src="assets/images/people/lisa-colledge.jpg" alt="Lisa Colledge" /></div><div class="box"><span class="number">04</span><span class="dots">••••••</span><span class="name">Lisa<br />Colledge</span></div><div class="arrow"></div></a> </div>
<div class="six columns"> <a href="#" class="eric">
<div class="overlay"></div>
<div class="wrap"><img src="assets/images/people/eric-swenson.jpg" alt="Eric Swenson" /></div><div class="box"><span class="number">05</span><span class="dots">••••••</span><span class="name">Eric<br />Swenson</span></div><div class="arrow"></div></a> </div>
<div class="six columns"> <a href="#" class="robbertjan">
<div class="overlay"></div>
<div class="wrap"><img src="assets/images/people/robbertjan-kalff.jpg" alt="Robbertjan Klaff" /></div><div class="box"><span class="number">06</span><span class="dots">••••••</span><span class="name">Robbertjan<br />Kalff</span></div><div class="arrow"></div></a> </div>
</div>
<div class="people">
<ul class="slides">
<li class="oliver">
<div class="person">
<div class="loadingslide"><h1>Loading..</h1></div>
<ul>
<li><img src="assets/images/people/large/oliver-dumon.jpg" alt="Oliver Dumon"/><span class="firstname">Olivier</span><span class="lastname">Dumon</span>
<div class="greybar">
<p>Managing Director, Academic & Government Research Markets</p>
</div>
</li>
<li>
<iframe class="quick-video" id="player_96519139" src="http://player.vimeo.com/video/96519139?api=1&player_id=player_96519139" width="100%" height="583px" frameborder="0"> </iframe>
</li>
</ul>
</div>
</li>
<li class="nick">
<div class="person">
<ul>
<li><img src="assets/images/people/large/nick-fowler.jpg" alt="Nick Fowler"/><span class="firstname">Nick</span><span class="lastname">Fowler</span>
<div class="greybar">
<p>Managing Director, Academic & Government Institutional Markets</p>
</div>
</li>
<li>
<iframe class="quick-video" id="player_96518302" src="http://player.vimeo.com/video/96518302?api=1&player_id=player_96518302" width="100%" height="557px" frameborder="0"> </iframe>
</li>
</ul>
</div>
</li>
<li class="mhamed">
<div class="person">
<ul>
<li><img src="assets/images/people/large/mhamed-el-aisati.jpg" alt="M'hamed El Aisati"/><span class="firstname">M'hamed</span><span class="lastname">El Aisati</span>
<div class="greybar">
<p>Director Content & Analytics</p>
</div>
</li>
<li>
<iframe class="quick-video" id="player_96518301" src="http://player.vimeo.com/video/96518301?api=1&player_id=player_96518301" width="100%" height="557px" frameborder="0"> </iframe>
</li>
</ul>
</div>
</li>
<li class="lisa">
<div class="person">
<ul>
<li><img src="assets/images/people/large/lisa-colledge.jpg" alt="M'hamed El Aisati"/><span class="firstname">Lisa</span><span class="lastname">Colledge</span>
<div class="greybar">
<p>Senior Manager Strategic Alliances</p>
</div>
</li>
<li>
<iframe class="quick-video" id="player_96518300" src="http://player.vimeo.com/video/96518300?api=1&player_id=player_96518300" width="100%" height="557px" frameborder="0"> </iframe>
</li>
</ul>
</div>
</li>
<li class="eric">
<div class="person">
<ul>
<li><img src="assets/images/people/large/eric-swenson.jpg" alt="Eric Swenson"/><span class="firstname">Eric</span><span class="lastname">Swenson</span>
<div class="greybar">
<p>Director of Product Management, Scopus</p>
</div>
</li>
<li>
<iframe class="quick-video" id="player_96518298" src="http://player.vimeo.com/video/96518298?api=1&player_id=player_96518298" width="100%" height="557px" frameborder="0"> </iframe>
</li>
</ul>
</div>
</li>
<li class="robbertjan">
<div class="person">
<ul>
<li><img src="assets/images/people/large/robbertjan-kalff.jpg" alt="Robbertjan Kalff"/><span class="firstname">Robbertjan</span><span class="lastname">Kalff</span>
<div class="greybar">
<p>Vice President of Product Strategy</p>
</div>
</li>
<li>
<iframe class="quick-video" id="player_96521077" src="http://player.vimeo.com/video/96521077?api=1&player_id=player_96521077" width="100%" height="557px" frameborder="0"> </iframe>
</li>
</ul>
</div>
</li>
</ul>
<nav>
<ul>
<li><a href="#" class="prev">Back</a></li>
<li><a href="#" class="next">Next</a></li>
</ul>
</nav>
</div>
<?php include('includes/footer.php'); ?>
</body>
</html>
这是运行滑块的Javascript
$('.people').flexslider({
selector: "ul.slides > li",
animation: 'slide',
slideshow: false,
start: function (slider) {
current_slide = slider.currentSlide + 1;
total_slides = slider.count;
},
after: function (slider) {
current_slide = slider.currentSlide + 1;
total_slides = slider.count;
}
});
$('.person').flexslider({
animation: 'slide',
selector: "ul > li",
slideshow: false,
start: function (slider) {
$('.person').flexslider(0)
}
});
2 个解决方案
解决方案1
1 2014-06-05 13:59:46
这非常内联！ 以API方式执行：
var player = document.getElementById('player_1');
$f(player).addEvent('ready', ready);
function addEvent(element, eventName, callback) {
if (element.addEventListener) {
element.addEventListener(eventName, callback, false)
} else {
element.attachEvent(eventName, callback, false);
}
}
您可以从他们的网站上获取它： FLEXSLIDER w API视频（VIMEO）
我只能认为不使用此基础的唯一原因是您正在使用某些CMS工具，但是如果不这样做，这是可行的方法。
解决方案2
0 已采纳 2014-06-05 14:33:12
通过添加以下4行代码进行修复：
var slider1 = $('.people').data('flexslider');
slider1.resize();
var slider2 = $('.person').data('flexslider');
slider2.resize();
FlexSlider根本不显示，字幕显示不正确吗？
[英]FlexSlider not showing up at all and captions are not showing correctly?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.