www.webdeveloper.com
Results 1 to 7 of 7

Thread: synchronous load of functions.

  1. #1
    Join Date
    Nov 2008
    Posts
    116

    synchronous load of functions.

    This has to have been asked many time but a search didn't return anything with "synchronous" in the name.

    I need to load images before they are displayed. I have made this work in the past but then using what appears to be the same method again doesn't work.

    I have something like this.

    Code:
    function loadImage(path)
    {
    	function loadImg(image)
    	{
    		if (image.complete>0)
    		{
    			alert(image.complete);
    			return true;
    		}else
    		{
    			setTimeout(function(){loadImg(image)},200);
    		}
    	}
    	
    	var preImage=new Image(0,0);
    	preImage.src=path;
    	loadImg(preImage);
    	return false;
    
    }
    function doSomething
    {
       loadImage(path);
       alert("Complete");
    }
    Complete is always returned before the load is complete. So, is there an understandable way to make the doSomething function wait until the load of the image is complete?

    I have searched for answers that I get the most convoluted solutions and none of them have decent explanations or at least not for me.

    Any one can explain just how to make this work?

    Thanks for any help you can provide.

  2. #2
    Join Date
    Jul 2008
    Location
    urbana, il
    Posts
    2,787
    you can add onload events to each preloaded image, and fire complete once all of the callbacks have fired, but it's easier to use window.onload; it fire when all the images are loaded.
    //global somewhere:
    var waiting=0;
    //// modifed from post #1:



    var preImage=new Image(0,0);
    waiting++
    preImage.onload=function(){ waiting--;};
    preImage.src=path;
    loadImg(preImage);
    return false;

  3. #3
    Join Date
    Nov 2008
    Posts
    116
    Thanks, but really doesn't help me at all.

    I have it working but it is always so ugly from a coding perspective, at least for me it is.

  4. #4
    Join Date
    Nov 2011
    Posts
    29
    Just wrote this up real quick, didn't test. Follow this logic.

    function loadImg(path,callBack)
    {
    var img = new Image();
    img.onload = function(){callBack();}
    im.src = path;
    return true;
    }

    function doSomething
    {
    loadImg(path,returnFunction);
    }

    function returnFunction
    {
    alert("complete");
    }

  5. #5
    Join Date
    Nov 2008
    Posts
    116
    Ah, that looks interesting. Thanks. Still a mess compared to what I'm used to in other languages but I see where that is going.

  6. #6
    Join Date
    Nov 2011
    Posts
    29
    You can simplify if you don't need to dynamically set the returnFunction and just write everything in img.onload = function(){YOUR STUFF HERE} and get rid of the 2nd argument in loadImg.

  7. #7
    Join Date
    Nov 2008
    Posts
    116
    Thanks, I see that. Might go that root.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles