Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 15 of 15
  1. #1
    Regular Coder
    Join Date
    Feb 2006
    Posts
    168
    Thanks
    32
    Thanked 1 Time in 1 Post

    Callback function not working after div content loaded

    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

  • #2
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,801
    Thanks
    8
    Thanked 131 Times in 129 Posts
    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>
    Stop making things so hard on yourself.
    i is tugbucket :: help raise tugburg :: Whitehaven Kiwanis

  • Users who have thanked harbingerOTV for this post:

    gribbs100 (02-28-2011)

  • #3
    Regular Coder
    Join Date
    Feb 2006
    Posts
    168
    Thanks
    32
    Thanked 1 Time in 1 Post
    Thank you very much for that help! You knew exactly what I was getting at. I appreciate it.

  • #4
    Regular Coder
    Join Date
    Feb 2006
    Posts
    168
    Thanks
    32
    Thanked 1 Time in 1 Post
    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>
    Last edited by gribbs100; 03-01-2011 at 04:52 AM.

  • #5
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,801
    Thanks
    8
    Thanked 131 Times in 129 Posts
    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+')'});
    }
    Stop making things so hard on yourself.
    i is tugbucket :: help raise tugburg :: Whitehaven Kiwanis

  • Users who have thanked harbingerOTV for this post:

    gribbs100 (03-01-2011)

  • #6
    Regular Coder
    Join Date
    Feb 2006
    Posts
    168
    Thanks
    32
    Thanked 1 Time in 1 Post
    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?
    Last edited by gribbs100; 03-01-2011 at 04:18 PM.

  • #7
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,801
    Thanks
    8
    Thanked 131 Times in 129 Posts
    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
    Stop making things so hard on yourself.
    i is tugbucket :: help raise tugburg :: Whitehaven Kiwanis

  • Users who have thanked harbingerOTV for this post:

    gribbs100 (03-01-2011)

  • #8
    Regular Coder
    Join Date
    Feb 2006
    Posts
    168
    Thanks
    32
    Thanked 1 Time in 1 Post
    It works perfect! Thank you!

  • #9
    Regular Coder
    Join Date
    Feb 2006
    Posts
    168
    Thanks
    32
    Thanked 1 Time in 1 Post
    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.

  • #10
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,801
    Thanks
    8
    Thanked 131 Times in 129 Posts
    really? um...

    works fine externally for me. You didn't happen to leave your script tags in the external file did you?
    Stop making things so hard on yourself.
    i is tugbucket :: help raise tugburg :: Whitehaven Kiwanis

  • #11
    Regular Coder
    Join Date
    Feb 2006
    Posts
    168
    Thanks
    32
    Thanked 1 Time in 1 Post
    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!

  • #12
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,801
    Thanks
    8
    Thanked 131 Times in 129 Posts
    ha ha. sounds like that would do it.
    Stop making things so hard on yourself.
    i is tugbucket :: help raise tugburg :: Whitehaven Kiwanis

  • #13
    Regular Coder
    Join Date
    Feb 2006
    Posts
    168
    Thanks
    32
    Thanked 1 Time in 1 Post
    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.
    Last edited by gribbs100; 03-02-2011 at 02:21 AM.

  • #14
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,801
    Thanks
    8
    Thanked 131 Times in 129 Posts
    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>
    Stop making things so hard on yourself.
    i is tugbucket :: help raise tugburg :: Whitehaven Kiwanis

  • Users who have thanked harbingerOTV for this post:

    gribbs100 (03-02-2011)

  • #15
    Regular Coder
    Join Date
    Feb 2006
    Posts
    168
    Thanks
    32
    Thanked 1 Time in 1 Post
    Works perfect now! Thanks a lot. I really learned something here.


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •