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}
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 would like to preload everything before HTML even starts displaying.
The problem is with loading external fonts, images etc.
I was trying to make simple jquery function with:
CSS:
html { display:none; }
jQuery:
$(window).load(function() {
$('html').css('display', 'block');
});
But that doesn't really work.
The main reason that I want to preload is that I have font animation on the page start and when the font isn't loaded and CSS animation is fired it looks a little buggy.
load() as a shortcut for on('load') is deprecated:
Try using
$(window).on('load', function() {
$('html').css('display', 'block');
});
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.
I'm trying to achieve the following: I have a div on which I use the load() method to fetch new HTML content.
$('#mydiv').load('/newcontent.html');
This new HTML also contains images, and I would like those images to be faded in once loaded.
First I tried using a callback function with the load() method, but this function is triggered as soon as the HTML is fetched, but before the browser has loaded all the new images.
Then I tried applying an on('load') event on all the newly fetched images, but this does not work at all.
$('#mydiv').load('/newcontent.html', function() {
$('#mydiv img').css('visibility','hidden').on('load', function() { $(this).fadeIn(); });
});
The "visibility: hidden" works fine, so that my new HTML content is loaded into #mydiv, and all images are set to invisible. But the fading in does not work. The event I'm trying to bind here does in fact trigger as soon as the new HTML is loaded (which does not make any sense to me), but not when the individual images are loaded.
How can I solve this? Any help appreciated!
Use fadeIn() and fadeOut() out jQuery. And if you want to do on load then use the event for that.
My current solution gets some content via AJAX, Inserts it into a DIV then hides it and fade it in.
The issue with that is the content contains images and an iframe, The solutions flickers and the fadeIn doesn't look smooth.
What i'd like to do is to only fadeIn after the iframe and pictures are fully loaded.
How to do that?
This will wait until all child content has finished loading:
$("#wrapperDivID").load(function (){
// do something, e.g.
$(this).fadeIn();
});
See .load().
In your specific case the following should work:
$('#content').load('/echo/html/',data, function() {
alert('fired');
});
I would change the duration for fadeIn so that it will take little long.
$("#content").load("getform.php"), function() {
$(this).fadeIn(1500); // or another bigger number based on your load time
});
If you know what all images are going to be in the page, Preload all those images in the page where you have the div "content", so that you will save some loading time.
If you use $.ajax to get the HTML you can wrap the resulting HTML like below:
$.ajax('some/path/to.html',{
'success':function(html){
var result = $(html).load(function(){
$('#content').fadeIn()
});
$('#content').html(result);
}
});
jsfiddle example
another way you can do this:
$( "#content" ).fadeOut(200, function() {
$(this).load( url, function() {
$(this).fadeIn(200);
});
});
change the fadeIn and Out times to whatever is good for you.