jQuery Callback function not working after div content loaded

gribbs100 · 02-28-2011, 07:44 PM

Hello Guys,

I am trying to do a very simple preload function. The main page of a website I am building has a full size background image. While the image file size is not huge, there is a slight delay rendering. I didn't want to use a fancy preloader so I figured just a full size div overlay with a solid background and some text that indicates site loading, etc.

I am trying to code it so that when the div called #back ( an its image content ) is fully loaded, then the div #preloader will fade out. That is it.

Also, im not sure if it is complicated to add it but, lets say it is loaded, then the visitor goes to another page and comes back to the index page, since the image is already in cache, I do want that process to repeat so I figured to use a cookie to skip that function from being repeated. Below is the code iv come up with so far but I'm sure I have some mistakes.

JQuery

Code:

$(window).load(function() {
	
$(function() {
    $('#back').load(function() {
        // fire when image loads

$('#preloader').fadeOut('2000', function() { 

});
});
}); 


//if the div #back & it's content ( a background image) is already cached, skip the entire preloader function. not sure how to add the below code in//

if($.cookie("loader") == null){
	????????	
            $.cookie("loader", "foo");
	});

Any help would be great.

Thanks

harbingerOTV · 02-28-2011, 09:37 PM

piggy-backing on this post: http://www.codingforums.com/showthread.php?t=216680

Code:

$(document).ready(function() {

imagePath = 'http://www.mlewallpapers.com/image/16x9-Widescreen-1/view/Sunrise-over-College-Fjord-500.jpg';
if($.cookie("imgTest") == null){
	$('#back').load(imagePath, function() {
		$('#back').fadeIn(2000).css({'background' : 'url('+imagePath+')'});
		$.cookie("imgTest", "foo");
	});
} else {
	$('#back').show().css({'background' : 'url('+imagePath+')'});
}

});

that, in testing, uses jQuery load to load an image and on success do three things:
1. fade in #back
2. set #back background image
3. sets the cookie 'imgTest'

if the cookie is set, it just show() #back.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript" src="cookie.js"></script>

$(document).ready(function() {

imagePath = 'http://www.mlewallpapers.com/image/16x9-Widescreen-1/view/Sunrise-over-College-Fjord-500.jpg';
if($.cookie("imgTest") == null){
	$('#back').load(imagePath, function() {
		$('#back').fadeIn(2000).css({'background' : 'url('+imagePath+')'});
		$.cookie("imgTest", "foo");
	});
} else {
	$('#back').show().css({'background' : 'url('+imagePath+')'});
}

});
</script>

<style type="text/css">
#message {
display: none;
border: 2px solid #000;
background: #eee;
text-align: center;
padding: 20px 0;
width: 300px;
position: absolute;
z-index: 999;
top:100px;
left: 50%;
margin-left: -151px;
}

#back {
width: 100%;
height: 1000px;
position: absolute;
top:0;
left: 0;
}

a { position: absolute; top 20px; left: 20px; z-index: 100; background: #fff; padding: 20px; display: block; }
</style>

</head>
<body>
<div id="back" style="display: none;"></div>

<a href="page2.html">Page 2</a>

<div id="message">
<p>Setting the cookie</p>
<p><a href="#x" onclick="return false">ok</a></p>
</div>

</body>
</html>

gribbs100 · 02-28-2011, 09:53 PM

Thank you very much for that help! You knew exactly what I was getting at. I appreciate it.

gribbs100 · 03-01-2011, 12:03 AM

I actually spoke a little bit too soon. The problem is that I am using a jquery plugin called supersized that keeps the aspect ratio of the full size background image.

With that said, instead of fading the background image in, what I need to do is code it so that once the background image is loaded, fadeOut a div overlay that will simply have a higher z-index. That way I can write on that div "loading website" or whatever and that fades out to reveal the website and background image

I have tried something like this but the image isn't coming up.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript" src="cookie.js"></script>

<script>

$(document).ready(function() {

imagePath = 'http://www.mlewallpapers.com/image/16x9-Widescreen-1/view/Sunrise-over-College-Fjord-500.jpg';
if($.cookie("imgTest") == null){
	$('#back').load(imagePath, function() {
		$('.cover').fadeOut(2000);
		$.cookie("imgTest", "foo");
	});
} else {
	$('.cover').hide();
}

});
</script>

<style type="text/css">
#message {
display: none;
border: 2px solid #000;
background: #eee;
text-align: center;
padding: 20px 0;
width: 300px;
position: absolute;
z-index: 999;
top:100px;
left: 50%;
margin-left: -151px;
}

#back {
width: 100%;
height: 100%;
position: absolute;
top:0;
left: 0;
z-index: 1;
}

.cover {
width: 100%;
height: 100%;
position: absolute;
background-color: #000;
top:0;
left: 0;
z-index: 999;

}

a { position: absolute; top 20px; left: 20px; z-index: 100; background: #fff; padding: 20px; display: block; }
</style>

</head>
<body>
<div class="cover"></div>
<div id="back"></div>

<a href="page2.html">Page 2</a>

<div id="message">
<p>Setting the cookie</p>
<p><a href="#x" onclick="return false">ok</a></p>
</div>

</body>
</html>

harbingerOTV · 03-01-2011, 12:44 PM

well the image isn't showing because nowhere in your code are you applying it as the background. Try this:

Code:

if($.cookie("imgTest") == null){
	$('#back').load(imagePath, function() {
    	     $('#back').css({'background' : 'url('+imagePath+')'});
	     $('.cover').fadeOut(2000);
	     $.cookie("imgTest", "foo");
	});
} else {
	$('.cover').hide();
        $('#back').css({'background' : 'url('+imagePath+')'});
}

gribbs100 · 03-01-2011, 03:11 PM

Thank you very much! Works great! I am actually in the learning stages of Jquery and your help has taught me a lot. I appreciate your patience as well.

I will continue studying meanwhile, its good to know there are people like you who are here to help when we get jammed up!

My only question is that how would I get this line to be a callback too?

Code:

$('#back').css({'background' : 'url('+imagePath+')'});

right now, .cover is fading out same time image is rendering because the line above is not a callback function. the fade should start after the render is complete. I tried putting a delay on the cover fadeOut but, it is ignored so I think I need a callback on the line above. Am I correct?

harbingerOTV · 03-01-2011, 04:16 PM

I think this is a tad trickier than I originally thought.

Code:

imagePath = 'http://www.johnharveyphoto.com/Life/05_2006/SnailsTravellingUnderBranchHg.jpg';

$(document).ready(function() {
	$('#dummy').html('<img src="'+imagePath+'">');
});

$(window).load(function() {
	if($.cookie("imgTest") == null){
    	 $('#back').css({'background' : 'url('+imagePath+')'}).delay(1, function(){
	     	$.cookie("imgTest", "foo");
		 	$('.cover').fadeOut(2000);
		});
	} else {
		$('.cover').fadeOut(0);
    	$('#back').css({'background' : 'url('+imagePath+')'});
	}
});

Notice I've added a <div id="dummy"> so:

Code:

#dummy {
display: none;
position: absolute;
top: 0;
left: -9999px;
}

So the idea that I think is working is to:

1) on ready, load the image into the hidden div.
2) one that image has fully loaded, the $(window).load will run.

re-test it for me

gribbs100 · 03-01-2011, 04:31 PM

It works perfect! Thank you!

gribbs100 · 03-01-2011, 04:52 PM

The script doesn't seem to work when I put the js as an external file as opposed to inside the document. I assume the script has to change?

Other than that, it is perfect.

harbingerOTV · 03-01-2011, 05:30 PM

really? um...

works fine externally for me. You didn't happen to leave your script tags in the external file did you?

gribbs100 · 03-01-2011, 08:12 PM

I found the issue. I had the path to cookie.js wrong. I had moved the file into another folder and forgot that I did so. It made the whole thing stall.

Working great now. Thanks so much!

harbingerOTV · 03-01-2011, 08:52 PM

ha ha. sounds like that would do it.

gribbs100 · 03-01-2011, 09:00 PM

I hope I am not being a pest. i have 1 last bug. I successfully ran the script externally but I'm having an issue with the else command. When you come back to the page if the cookie is set, im trying to fade in the back image and then the main content after that. that is how all the pages work they fade in then fade out when you leave. I wanted to keep this page the same to keep the same effect throughout the site.

This is my full external .js file.

Code:

$(document).ready(function() {

imagePath = 'http://www.mlewallpapers.com/image/16x9-Widescreen-1/view/Sunrise-over-College-Fjord-500.jpg';


	$('#dummy').html('<img src="'+imagePath+'">');
});

$(window).load(function() {
	if($.cookie("imgTest") == null){
    	 $('#back').css({'background' : 'url('+imagePath+')'}).delay(100, function(){
	     	$.cookie("imgTest", "foo");
		 	$('.cover').fadeOut(2000,function(){
				$('#main_content').fadeIn(300);
		});
		});
	} else {
		$('.cover').fadeOut(0);
    	$('#back').css({'background' : 'url('+imagePath+')'}).fadeIn(500, function(){	
		$('#main_content').delay(500).fadeIn(700);
		});
		
	}

});

Did I miss something? I'm trying to learn but cant find the bug.

harbingerOTV · 03-02-2011, 01:55 PM

see if this is what you're looking for:

Code:

imagePath = 'http://jasonlow08.files.wordpress.com/2010/06/ms_cupcakes87379.jpg';

$(document).ready(function() {
	$('#dummy').html('<img src="'+imagePath+'">');
});

$(window).load(function() {
	if($.cookie("imgTest") == null){
    	 $('#back').css({'background' : 'url('+imagePath+')'}).show().delay(100, function(){
	     	$.cookie("imgTest", "foo");
		 	$('.cover').fadeOut(2000,function(){
				$('#main_content').fadeIn(1000);
			});
		});
	} else {
		$('.cover').fadeOut(0);
    	$('#back').css({'background' : 'url('+imagePath+')'}).fadeIn(2000, function(){	
			$('#main_content').fadeIn(1000);
		});
	}
});

and my HTML:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript" src="js.js"></script>
<script type="text/javascript" src="cookie.js"></script>

<style type="text/css">
body {
background: #000;
}

#back {
width: 100%;
height: 100%;
position: absolute;
top:0;
left: 0;
z-index: 1;
display: none;
}

.cover {
width: 100%;
height: 100%;
position: absolute;
background: #000 url(http://www.aacompass.com/images/loading.gif) center center no-repeat;
top:0;
left: 0;
z-index: 999;
}

#dummy {
display: none;
position: absolute;
top: 0;
left: -9999px;
}

a { position: absolute; top: 20px; left: 20px; z-index: 100; background: #fff; padding: 20px; display: block; }

#main_content {
width: 360px;
border: 2px solid #000;
padding: 20px;
background: #ccc;
color: #000;
position: relative; 
z-index: 2;
font: 12px/16px arial, sans-serif;
margin: 30px auto;
display: none;
}
</style>

</head>
<body>
<div id="dummy"></div>
<div class="cover"></div>
<div id="back"></div>



<div id="main_content">
<p>It is an ancient Mariner,<br />
And he stoppeth one of three.<br/>
'By thy long grey beard and glittering eye,<br />
Now wherefore stopp'st thou me?<br /><br />

The bridegroom's doors are opened wide,<br />
And I am next of kin;<br />
The guests are met, the feast is set:<br />
Mayst hear the merry din.'</p>
</div>

<a href="page2.html">Page 2</a>

</body>
</html>

gribbs100 · 03-02-2011, 05:38 PM

Works perfect now! Thanks a lot. I really learned something here.