Geek Answers Handbook

How do you preload images in the Orbit slider?

The problem is that the slider does not display correctly when the user first visits the site. When testing, the slider worked fine. How the slider is after loading

Or, in fact, there was a problem that it will not load the first time you visit the page, but then it will appear when (and only when) you refresh the page. But otherwise, a slider appears, but not images How the slider loads poorly

I looked at the Zurb documentation in the Zurbs documentation for the Orbit slider and they have a sample file. This original demo file has a link above the images (which I deleted) Code from the demo

Then I searched more on Google using a phrase about this topic, using the keyword “orbit preload images” and found “One Solution” with the preload function. Below is the code I used to preload (I just changed the path to the 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 and added a script, but it still does not load. The full code for this page can be viewed on Gist on GitHub

The code for installing the image slider can be viewed in Gist on GitHub

The site is hosted on a server located in a .net environment that does not support php.

+4
source share
1 answer

I had the same problem and after some research I found an answer that works for me; Basically, you can use jquery to hide the slider at boot time. See also this link for more information: how to show div #loading while div #content is loading

Looking at your code , this should work (unverified)

In the <head> section, add this:

 <script type="text/javascript"> jQuery(document).ready(function() { // hide orbit slider on load when user browses to page $('#featured.orbit').hide(); // hide div, may need to change id to match yours $('.loading').show(); // show the loading gif instead // then when the window has fully loaded $(window).bind('load', function() { $('.loading').hide(); // hide loading gif $('#featured.orbit').fadeIn('slow'); // show orbit }); }); </script>

On an html page containing the orbit slider code (content copied from your page)

 <!-- ======================================= ORBIT SLIDER CONTENT ======================================= --> <div style="width:100%;"> <div style=" max-width:480px; margin: 0px auto;"> <div id="featured" > <!-- your content etc..... --> <span class="orbit-caption" id="radioCaption">Radiograph shows crown seated with excellent marginal integrity</span> </div> </div> <?php // // load the loading image - you need to add one to your image directory // see here to 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 your CSS you need to hide the #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 this helps!

+2
source

More articles:


All Articles