Menu icon Foundation
Reveal Modal w/ Orbit Slider = Slow Load

I have looked in every corner of the interwebs to find a solution to this problem with no luck. Here goes... I am using foundation 3. I have an orbit slider on the home page of the site. The slider has always worked fine...in production for over a year with no issues. Then about 6 months ago, I added a vimeo video inside a reveal-modal. There are two links on the page that open the modal window and the video plays without any issues. Good so far, right? :) Here's the issue. Ever since adding the following code, it now takes a full 7 - 10 seconds for my Orbit Slider to display on the home page. The performance in Chrome is the worst, but Firefox isn't much better.

When I run a google speed test, it indicates that I need to eliminate these render blocking references:
https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js
http://a.vimeocdn.com/js/froogaloop2.min.js (used for vimeo)

When I take out the reveal modal code (shown below), the page loads the orbit slider very fast, so I at least think I've narrowed it down to this code block. I've tried loading all my js dependencies using async (and defer too) and nothing seems to help. I would greatly appreciate any help you can provide. Surely I am not the only one that has added a vimeo video inside a modal on the same page as their orbit slider!

<div id="myModal" class="reveal-modal">
  <iframe id="myVideo" src="http://player.vimeo.com/video/12345678?api=1&amp;player_id=myVideo&amp;title=0&amp;byline=0&amp;portrait=0&amp;badge=0&amp;color=000000" width="515" height="415" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
<a class="close-reveal-modal">&#215;</a>
</div>
            

         

Orbitrevealslow loadingslowslidermodal

I have looked in every corner of the interwebs to find a solution to this problem with no luck. Here goes... I am using foundation 3. I have an orbit slider on the home page of the site. The slider has always worked fine...in production for over a year with no issues. Then about 6 months ago, I added a vimeo video inside a reveal-modal. There are two links on the page that open the modal window and the video plays without any issues. Good so far, right? :) Here's the issue. Ever since adding the following code, it now takes a full 7 - 10 seconds for my Orbit Slider to display on the home page. The performance in Chrome is the worst, but Firefox isn't much better.

When I run a google speed test, it indicates that I need to eliminate these render blocking references:
https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js
http://a.vimeocdn.com/js/froogaloop2.min.js (used for vimeo)

When I take out the reveal modal code (shown below), the page loads the orbit slider very fast, so I at least think I've narrowed it down to this code block. I've tried loading all my js dependencies using async (and defer too) and nothing seems to help. I would greatly appreciate any help you can provide. Surely I am not the only one that has added a vimeo video inside a modal on the same page as their orbit slider!

<div id="myModal" class="reveal-modal">
  <iframe id="myVideo" src="http://player.vimeo.com/video/12345678?api=1&amp;player_id=myVideo&amp;title=0&amp;byline=0&amp;portrait=0&amp;badge=0&amp;color=000000" width="515" height="415" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
<a class="close-reveal-modal">&#215;</a>
</div>
            

         
Trying To Be Helpful over 5 years ago

Me thinks the load delay is due to the Vimeo video being loaded. Have you tried your exact script with a placeholder instead of the video embed? See if that loads fine w/Reveal but w/o the video.

Maybe you could add something to defer the loading, or call in the iframe when it is needed. Not sure, sorry.