javascript - How do you preload images into the Orbit slider? -
the issues slider not displaying when user first visits site. in testing slider worked fine. 
or there problem not load when first visiting page, show when (and when) refresh page. otherwise slider shows not images 
i looked @ documentation zurb @ zurbs documentation orbit slider , have sample file, original demo file has link above images (which removed) 
i searched more on google using phrase topic using keyword "orbit preload images" , found one solution preload function. below code used preload (i modified path images)
<script language="javascript"> function preload(arrayofimages) { $(arrayofimages).each(function(){ $('<img/>')[0].src = this; }); } preload([ '../images/products/mill/slider/dentist.jpg', '../images/products/mill/slider/side.jpg', '../images/products/mill/slider/before.jpg', '../images/products/mill/slider/after.jpg', '../images/products/mill/slider/radio.jpg' ]); </script> i went ahead , added script still not loading. complete code page viewable in gist on github
the code setup of image slider viewable in gist on github
the site hosted on server in .net environment not support php.
i had same issue , after research, found answer works me; basically, can use jquery hide slider whilst it's loading. see also, link further info: how show div #loading whilst div #content loads
looking @ your code, should work (untested)
in <head> section, add this;
<script type="text/javascript"> jquery(document).ready(function() { // hide orbit slider on load when user browses page $('#featured.orbit').hide(); // hide div, may need change id match yours $('.loading').show(); // show loading gif instead // when window has loaded $(window).bind('load', function() { $('.loading').hide(); // hide loading gif $('#featured.orbit').fadein('slow'); // show orbit }); }); </script> in html page contains orbit slider code (content copied page)
<!-- ======================================= orbit slider content ======================================= --> <div style="width:100%;"> <div style=" max-width:480px; margin: 0px auto;"> <div id="featured" > <!-- content etc..... --> <span class="orbit-caption" id="radiocaption">radiograph shows crown seated excellent marginal integrity</span> </div> </div> <?php // // load loading image - need add 1 image directory // see here generate one: http://www.ajaxload.info/ ?> <div class="loading"> <img src="http://www.yourdomain.com/path/to/folder/loading.gif"/> </div> </div> <!-- end twelve columns--> in css need hide #featured div
#featured { display: none; background: #f4f4f4; height: 600px;} #featured img { display: none; } #featured.orbit { background: none; } .loading {margin: 0 auto;text-align:center;margin:30px; } hope helps!
Comments
Post a Comment