I know there is a bunch of questions like this but none really answering my question.
I had make a preloader with css animation and I want to be synchronised with page load. I can trigger the animation on page load but I want to manage the time that animation last somehow so to follow exactly the page load (even if it's too fast).
An example : http://jsfiddle.net/RgPU7/
I want the 'filling' effect to follow page load time.
Right now I just apply a delay and a fadeout effect to the modal that wraps the css animation.
jQuery(window).load(function(){
$(".modal").delay(3000).fadeOut(1000);
});
Any suggestions would be great. Thanks!
You can always delay a function like this
setTimeout(function() { your_func(); }, 5000);
or you can do something like this
$(this).fadeOut(500, function(){
//Do something
$(this).fadeIn(700);
});
I hope this helps.
Related
I have a Bootstrap carousel and an invisible div with a loading gif that I want to show while a big image is loading. I'd like to show this div only when I change the active image on the carousel and this image is still loading.
I've already got the HTML and CSS working, I just need an help with jQuery.
I fetch the images links from Imgur and then build the carousel-items that I need with jQuery and append them on the carousel container.
I then attached to the carousel event slide.bs.carousel a function that shows me the loader. and this works
BUT BUT BUT
I'm worried that the loader will show for few milliseconds even if the image is already loaded/cached. How can I prevent this? How can I know if the image that is becoming active is already loaded? Do I really need to worry about this or I just leave it like this?).
I then want to hide the loader when the active image is ready, and I've done this:
$('.carousel-item img').each(function(){
$(this).on('load', function(){
$("#loader_container").css("visibility","hidden");
});
});
But it doesn't work. Seems like this load even keeps firing until
all the images of the whole carousel are loaded, and also somehow
the loader doesn't hide in the end, and this is the issue n.2.
Probably I'm approaching this wrong.
Is issue n.1 really a problem? And how can I solve issue n.2?
Thank you!
EDIT 1:
I tried to do this but still doesn't work. When I slide to the next slide I see that the image is already loaded, then the loader appears and doesn't go away anymore.
$(".carousel-item img").each(function(index){
$(this).on('slid.bs.carousel', function(){
$("#loader_container").css("visibility","visible");
});
$(this).on('load', function(){
$("#loader_container").css("visibility","hidden");
});
$(this).attr("src",links[index]);
});
EDIT 2:
Also, it seems like the browser try to load all the images as soon as possible, even the ones that are not displayed/are not active items.
I'd like to load the images only if the user goes to that slide and makes the item active.
EDIT 3:
I've found a library name jquery.unveil.js that seems like it does exactly what I need and is super easy to use... but somehow it doesn't work.
Maybe AngularJS can help me? Anyone know how can I modify my code to do this with angular? Like using ngui-in-view?
$('.carousel-item img').each(function(){
$(this).on('slid.bs.carousel', function(){
$("#loader_container").css("display","none");
});
});
You can use the slide.bs.carousel and slid.bs.carousel instead
Solved with lazy loader, here the code:
$(".carousel.lazy").on("slide.bs.carousel", function(ev) {
var lazy;
lazy = $(ev.relatedTarget).find("img[data-src]");
if(lazy.length > 0){
$("#loader_container").css("visibility","visible");
$(".carousel-item img").on("load",function(){
$("#loader_container").css("visibility","hidden");
});
lazy.attr("src", lazy.data('src'));
lazy.removeAttr("data-src");
}});
I needed that if(lazy.length > 0) because once I did a full round of the carousel and all the images where loaded, somehow the loader would show up and never go away. I tried with if(img.complete) but it didn't work so I used that technique.
I'm using preloadme script to fadeOut my preloader div on window.load but I'm wondering if instead of waiting for the whole entire page to load I can target one specific div:
preloadme code
$(window).load(function() {
$('#status').fadeOut();
$('#preloader').delay(350).fadeOut('slow');
$('body').delay(350);
})
my idea that doesn't work
$('#img-container').load(function() {
Any suggestions greatly appreciated
I am afraid its not possible, since you can access the page element once DOM is initialize.
just go with $(function(){ //your code}), that will make your code run every time
$(function(){
$('#status').fadeOut(); // dont rely on this to hide the loaded, use css below
$('#preloader').delay(350).fadeOut('slow');
});
You can do this using CSS, to initially show the preloaded till page loads
#preloader {display:block}
I have a application that loads CSS styles dynamic based on user preference. I use requirejs to load these like:
require(['css!dir/styles'], function(){ .... });
this works great but I don't want to show the screen until all the styles have fully initialized.
I've added a CSS class to the body of the page called hide-page and then remove that class when the callback occurs. Like:
setTimeout(function() { $(document.body).removeClass('hide-page'); }, 100);
but even with the settimeout, the page still loads jumbled until everything has initialized. I was thinking about doing a setInterval and checking if a particular style has been applied to a node like:
setInterval(function(){
if($(document.body).style('background'') === "#FFFFFF"){
$(document.body).removeClass('hide-page');
}
}, 10);
but thats kinda hackey. Is there a better solution anyone has to accomplish this?
You don't say how you're hiding the page content, but that could be the problem if you're using display:none.
Try visibility:hidden instead. This will allow the browser to allocate the space needed to construct the page, so you shouldn't see the jumbled FOUC.
I'm using the JavaScript setinterval method, but the DIV appears slowly. Could someone please tell me how to remove the fadein effect? I need for it to appear immediately.
Here is my code:
<script>
setInterval(
function()
{
$('#lista').show().load('pagination.php').fadeIn('slow');}, 0);
</script>
Wow that is a simple question, and one that you could have learned quickly by reading a bit of jQuery documentation. But no matter.
$('#lista').show().load('pagination.php');
You see, you're already showing the element with id lista and then loading some html into it. No need to have the fadeIn on the end.
A possibly better way to achieve the same thing, however only showing the element once the data is loaded, is to pass a callback to the load method:
$('#lista').load('pagination.php', function(){ $(this).show();} );
How can I possibly delay the disappearance of the menu by some miliseconds/seconds?
going ahead and editing this fadesettings: {overduration: 350, outduration: 2000}in the js only changes the animation speed. But THAT IS NOT what I want =).
Please check this JSFiddle to see the JS, CSS, and HTML.
Thanks for the help guys
P.S:- about the top:80px gap that you see, I intentionally put it there cuz that's the way I'm styling my site so I want the gap there.
You can user the setTimeout function to add a delay before you call a function.
In your case, if you want to delay the fadeout of the menu, instead of just doing :
$this.children("ul:eq(0)").fadeOut(jquerycssmenu.fadesettings.outduration);
You could do
setTimeout(function() { $this.children("ul:eq(0)").fadeOut(jquerycssmenu.fadesettings.outduration)
}, 2000);
to delay the call by 2 seconds.
Note that I cached the $(this) selector in your fiddle to still be able to access the variable.
http://jsfiddle.net/KB5Ve/
EDIT :
Added comments on the fiddle : http://jsfiddle.net/DBvq7/