Hide loader after script and images are loaded Completely - javascript

I am included external script and lib. and images are in DOM. I want to remove loader after images and scripts are loaded completely in URL.
window.onload= function(){
$(".loader").hide();
}
but it is not working before script or image loaded it is executed.

you syntax is incorrect. use this
replace
window.onload= function(){
by
$(window).load(function() {})
the $(window).load() function run when the page is fully loaded including graphics. see https://api.jquery.com/load-event/

you can check if the image is loaded using a setTimeout, take a look below:
setTimeout(function () {
//Check if the image or whatever is loaded
}, 30000);
Also you can create an attribute to don't enter again in the setTimeout after your stuffs are loaded, like:
var isLoaded = 0;
if(isLoaded == 0){
setTimeout(function () {
isLoaded = 1;
//Check if the image or whatever is loaded
}, 30000);
}
You can encapsulate your code in different cases:
The code below it'll wait for all the images and text assets to finish loading before executing.
$(window).load(function(){
//your code
});
The code below it'll wait for the text assets to be loaded
$(document).ready(function(){
//your code
});
I hope it's helps.

Related

Wait until page is loaded after location.replace

I've the following function in jquery:
$(document).ready(function(){
$('.folder-action').bind('click', function location() {
if(parent.document.location.pathname!="/home.php"){
window.location.replace("home.php");
location();
});
//Other portion of code that need page has been loaded.
});
});
When the replace has been excecuted I need that all the elements of the page are already loaded to execute other portions of the code in the new page(home.php).
It've tryed with:
setTimeout(function() {location()}, 300);
But it still doesn't work. Is it possible to wait until all elements of the page are loaded?
You can not do it like that because once you used the replace function, the browser will leave your current page and won't execute anymore code.
The best thing to do is to put your Other portion of code in the $(document).ready of the home.php

how can fire event after end loading nested html page (page in object )

i want hide object after html page end loading not the man html tag
this is my code
$('<div id="content" ><object data="../06.html"></div>').appendTo('section')
i try use load but return after div loading i don't want this
With jQuery, you can start some action after the DOM is loaded. The content (e.g. images) isn't necessarily already there, but you can manipulate every DOM element after the DOM is ready. Use the following snippet for that:
$(document).ready(function() {
//some code
});
If you want to wait until the page is fully loaded (e.g. also images), you can use window.onload:
window.onload = function() {
//some code
};
To hide a <div> when your webpage is fully loaded:
$(window).load(function () {
$('div').fadeOut(); //or .hide()
});
To show a div when the page is fully loaded:
$(window).load(function (){
$('div').fadeIn(); //or show()
});
If that's not what you're looking for, then please do explain more about your problem.

Html preloader - delay page load

I need some help with my new template :). Before the webpage loads I want to show a preloader gif. I done it, however it shows just a little, because the page loads very fast. So I would like to delay the page (with 2 seconds, as an exemple), without affecting the preloader, so it (the preloader) would appear for 2 seconds, so until the page loads.
Here is my code (note that it will not work on jsfiddle, because I can't upload the .gif file): jsfiddle.net/hLmxpsnw/
For whatever reason u want it its done using setTimeout here is the code
jQuery(document).ready(function ($) {
$(window).load(function () {
setTimeout(function(){
$('#preloader').fadeOut('slow', function () {
});
},2000); // set the time here
});
});
jsfiddle http://jsfiddle.net/harshdand/593Lqqnm/2/
You Can Just use delay(); jquery function to add dealy to Preloader
$(document).ready(function () {
$(window).load(function(){
$('#preloader').delay(3000).fadeOut();
});
});
it's a sample
<script>
setTimeout(function () {
$('.loader-container').fadeToggle ();
},3500);
</script>

More efficient way to wait for all images to load in jQuery

I'm using a mix of .ready() and .load() to execute my desired function.
jQuery(document).ready(function($) {
$("img").load(function() {
// Function goes here
});
});
As you can see, this waits for the DOM to be ready, then on each <img> load, it executes the code.
If I only had one image to load this would be simple.
But the problem is -- what if I have 10 images to be loaded? The function will be called 10 times due to each image loading one by one, and that's not a very efficient way to go about it just to achieve what I want.
So here's the question -- is there a more efficient way to wait for all images to load, then execute the function once?
You could do something like this to avoid having your function run multiple times.
jQuery(document).ready(function($) {
var nrOfImages = $("img").length;
$("img").load(function() {
if(--nrOfImages == 0)
{
// Function goes here
}
});
});
jQuery(window).load(function() {
alert("page finished loading now.");
});
jQuery(window).load(...) will be triggered after all content on the page has been loaded. This different from jQuery(document).load(...) which is triggered after the DOM has been loaded. I think this will solve your issue.
If anybody wants to know, my final result was this:
(function($) {
$(window).load(function(){
// Function goes here
});
})(jQuery);
that's because
jQuery(window).load(function($) {});
isn't a jQuery object, as referenced in this question:
Calling jQuery on (window).load and passing variable for 'No Conflict' code

Load javascript animation ONLY when entire site (images) loaded

I'm building this hotsite that relies heavily on 'heavy' images and animations.
It has some "Curtains" covering all the site, then i want to open these curtains (animate, already coded it), but only when all my site (specially images) is loaded.
Would also like to create a simple loader (no progress at all, just say "loading");
UPDATE:
$.ready(function() {
$("#loading").fadeOut();
$(".leftcurtain").stop().animate({ width: '374px', left: '-60px' }, 6200);
$(".rightcurtain").stop().animate({ width: '374px', right: '-60px' }, 6200);
$(".leftback").stop().animate({ width: '60px' }, 6500);
$(".rightback").stop().animate({ width: '60px' }, 6500);
});
Using
window.onload = function() {
// initialize site
};
Will work. It fires once everything embedded into the site (HTML, CSS, images...) has finished loading.
You will then need to hide your website content while it loads. If you place everything within a DIV, you can toggle the visibility of it with "visibility: hidden". You should not use "display: none", as with some browsers (if I can remember correctly, Opera), they won't load content that has no display value.
You should then be able to place a DIV containing your "Loading" content at the top of the page, then simply either toggle off the display of it, or remove it from the DOM once the page is loaded.
As a side note, you should not use the jQuery.ready() function, as pointed out by RobG, as this only waits for the DOM to load, and not the images.
try combining jQuery`s ready and load
$(document).ready(function()
{
var images = $('img');
var loadedImgs = [];
images.each(function()
{
$(this).load(function() //image load callback
{
loadedImgs.push('');
});
// we are interested only if the images is loaded,
// so we need to place something in the loadedImgs array;
});
var interval = setInterval(function()
{
if(loadedImg.length == loadedImgs.length)
{
clearInterval(interval);
//your code here ... images were loaded !!!
}
},10);
});
Put your handlers inside window.load. This is triggered only after the page is fully loaded, including graphics.
$(window).load()
Use Prototype's Event.observe like
Event.observe(window, 'load', function()
{
//add javascript script tags to the document here
}
Function in Event.observe will be called only after all the images in the DOM are loaded.
Just use:
window.onload = function(){
// javascript code will be executed only after the whole dom is loaded
}
With Jquery:
$.ready(function(){
// some code
});

Categories