Load javascript animation ONLY when entire site (images) loaded - javascript

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
});

Related

What is the difference between writing $(window).scroll(); inside document.ready() and outside it?

What is the difference between the below two codes?
1.
$j(document).ready(function() {
$j(window).scroll(function() {
// do something
});
});
2.
$j(window).scroll(function() {
// do something
});
The code
$j(document).ready(function() {
$j(window).scroll(function() {
// do something
});
});
only executes when the DOM has loaded, in contrast to
$j(window).scroll(function() {
// do something
});
which executes as soon as the javascript execution reaches this part of code
Read for further information: https://api.jquery.com/ready/.
$(document).ready(function(){ }); only runs when everything is loaded, this means including images and iframes. So when you scroll you actually scroll to the point that you want to go to. In case the images are not loaded yet, you will scroll to a part, and then the images load which makes the page change and move element, which then can be add a different place then where you initially scrolled to.
https://learn.jquery.com/using-jquery-core/document-ready/

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.

Hide loader after script and images are loaded Completely

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.

Javascripts not fully loading in jQuery ajax content

I have a problem and it's giving me headaches since I started looking for it yesterday.
I have a couple of jQuery scripts and my page includes .load jQuery ajax (at the bottom of the page).
I use a hover effect for the images and a fixed position of the header that is located in js/tools.js
The problem is that, randomly my browsers won't load the tools.js into the ajax. So sometimes you don't see the image hover effect in the loaded ajax content. When refreshing the page it woks fine.
My first bet was that the scripts I use collide or that there's a problem with the order in which the content or the .js loads.
js:
$(document).ready(function() {
$('.cta-btn, .portf1, .portf2, .portf3, .portf4, .portf5, .btn-facebook, .btn-twitter, .btn-linkedin, .btn-studiofacebook, .btn-studiotwitter,.btn-studiolinkedin,.newsitem1, .newsitem2, .newsitem3').append('<span class="hover"></span>').each(function () {
var $span = $('> span.hover', this).css('opacity', 0);
$(this).hover(function () {
$span.stop().fadeTo(200, 1);
}, function () {
$span.stop().fadeTo(400, 0);
});
});
});
$(function(){
var stickyHeaderTop = $('#stickyheader').offset().top;
$(window).scroll(function(){
if( $(window).scrollTop() > stickyHeaderTop ) {
$('#stickyheader').css({position: 'fixed', top: '0px'});
$('#stickyalias').css('display', 'block');
} else {
$('#stickyheader').css({position: 'static', top: '0px'});
$('#stickyalias').css('display', 'none');
}
});
});
html:
<!-- portfolio -->
<div id="portfoliowrapper">
<div id="portfolioitems"></div>
<script>$("#portfolioitems").load("werk.html #portfolio");</script>
<div class="clear"></div>
<h2 class="btn">Werk</h2>
</div>
Any ideas? Thanks in advance!
You need to show some code, you can't expect us to dig through your site.
It's very likely that you're using
$(function(){
// code that depends on images being loaded here
});
However, that will not wait for the images to load, it only waits until the DOM is ready to be modified. The event that waits for images is the load event of the window.
$(window).load(function(){
// here all images in the HTML are guaranteed to be loaded
});
The second time your page is run, the images are in the cache and they are already loaded when the DOM is ready, that is from your $(document).ready() handler
The issue is here:
$("#portfolio").offset() is null
Line 33
According to Firebug. Looks like you are trying to call a function before the page has been completely rendered, this is causing an error as it cannot calculate the offset and it breaks the rest of the function.

Fade in Ajax content after it's fully loaded

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.

Categories