pre loader for entire owl carousel

Hi all,
we are using owl carousel to show a series of info block on a website.
link to test page
I am familiar with owl carousel so know that I can lazy load for individual "owl-items" containing images however I am looking to find way to add a pre loader to the entire carousel (not just individual items.
When we first open the page our carousel is not there then it simply appears after a brief delay. Id like to show that something will soon appear.
Granted my example carousel does appear quickly however we have others where the lag is more pronounced.
Hope someone can assist.
Cheers,
N
LVL 5
Neil_BradleyWeb UX/UI DeveloperAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Marco GasiFreelancerCommented:
You can use just a little trick.
Place this immefiately after the body tag:
<div id="pre-div">
	<div id="loader">
	</div>
</div>

Open in new window

Give it the desired styles:
#pre-div {
	background-color: #0000FE;
	bottom: 0;
	height: 100%;
	width: 100%;
	left: 0;
	position: fixed;
	right: 0;
	top: 0;
	z-index: 10000;
}
#loader {
	background-image: url("../images/ajax-loader.gif");
	background-position: center center;
	background-repeat: no-repeat;
	height: 200px;
	left: 50%;
	margin: -100px 0 0 -100px;
	position: absolute;
	top: 50%;
	width: 200px;
}

Open in new window

if you want keep th epage viible you can just set the background of the pre-div to transparent so the visitors will see just the animated loader.
Then in your footer:
$(document).ready(function ()
{
	$(window).load(function () {
			$("#loader").fadeOut();
			$("#pre-div").delay(1000).fadeOut("slow");
	});
});

Open in new window

Depending of the number of images owl-carousel has to display you might need to adjust the delay interval.
That's all. To me works fine. Hope to you too.
0
Neil_BradleyWeb UX/UI DeveloperAuthor Commented:
Hi Marco,
could this not adjusted to test if the owl carousel script has loaded?
Essentially what I am after is a pre loader to show that there is something where the owl carousel will appear.
Thansks for your input on this.
Cheers,
N
0
Marco GasiFreelancerCommented:
I'm not sure to understan what is the problem, so I try to guess.

1 - You are expecting to see a loader animated image which give the user the sensation something i happening but you don't see anything but a blue screen: search google to find a loader.gif to display. You can find a tons of these images: save one of them somewhere within your site and adjust the path in the css:
#loader {
	background-image: url(<relative-path-to-your-gif>);

Open in new window


2 - you want the pre-div appear just in the owl-carousel div, not in the whole page: put the pre-div within the columns which holds the carousel. Don't forget to add to that column another class, something like owl-wrapper. Add this to your css:
.owl-wrapper{
    position: relative;
}

Open in new window

Hope I guess your needs
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Neil_BradleyWeb UX/UI DeveloperAuthor Commented:
Hi Marco,
yes, you are correct. Its a visual clue that something will appear. The final development will pull the contents of the carousel from a database so there may be a lag while the data loads up and populates the carousel. Hence the need for some kind of visual graphic to let people know that something is happening.

I guess your solution is a simple one using plain old css. hold open the space with a wrapper dic containing a loader. The cover it with the owl when it loads.
I will give it a go and see how it looks.
0
Neil_BradleyWeb UX/UI DeveloperAuthor Commented:
Thanks for your assistance with this one. I think I was looking too deeply at what turned out to be a relatively straight forward solution.
Brilliant!
Neil
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
jQuery

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.