Flexslider 2 with vimeo not loading correctly chrome
https://stackoverflow.com//questions/24060371
-
26-12-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianQuestion
I have a page on a website which has a flexslider with 5 image slides and 5 video slides. The slider loads perfectly in IE and Firefox but in Chrome the slider can take up to about a minute to appear and often doesnt load until you resize the browser window or click on the page.
Here is a link to the website: http://10.scopus.com/people.php
EDIT:
Another point I have just noticed, if you resize the browser window it seems to instantly load in
EDIT:
Here is my code for the page
<!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>
Here is the Javascript to run the sliders
$('.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)
}
});
Solution 2
Fixed by adding these 4 lines of code:
var slider1 = $('.people').data('flexslider');
slider1.resize();
var slider2 = $('.person').data('flexslider');
slider2.resize();
OTHER TIPS
This is very inline! Do it the API way:
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);
}
}
You can grab this from their site: FLEXSLIDER w API Video (VIMEO)
I can only think that the only reason you are not using it this base is that you are using some CMS tool, but if not this is the way to go.
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
