6 Replies - 2907 Views - Last Post: 15 April 2011 - 03:35 AM

#1 GhandiJones  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 54
  • View blog
  • Posts: 174
  • Joined: 17-March 11

Running script after all images load...

Posted 12 April 2011 - 04:11 PM

I have a simple script that generates a background color for a div element, and I have an image with some transparency set as the background for that element. I'm having trouble getting the script to run AFTER the image loads. The script call is after my footer and right before the body closing tag. The function, itself, is in a seperate js file.

How would I make my function pause until after the elements have loaded? Thanks in advance guys.

Is This A Good Question/Topic? 0
  • +

Replies To: Running script after all images load...

#2 Jstall  Icon User is offline

  • Lurker
  • member icon

Reputation: 434
  • View blog
  • Posts: 1,042
  • Joined: 08-March 09

Re: Running script after all images load...

Posted 13 April 2011 - 04:45 AM

Hi,


While the $(document).ready event is ideal for more cases if that is not working for you you can try the load event
  $("#image").load(function(){
    //do magic here

  });



That should ensure the code is not run until the image is completely loaded. I would suggest you try the document ready method first and the load second. Note: jquery also as a load method loads html via AJAX, if you are searching through the docs make sure you are looking at the correct page(my link is the correct one). Hope this helps :).
Was This Post Helpful? 1
  • +
  • -

#3 codeprada  Icon User is offline

  • Changed Man With Different Priorities
  • member icon

Reputation: 947
  • View blog
  • Posts: 2,355
  • Joined: 15-February 11

Re: Running script after all images load...

Posted 13 April 2011 - 07:44 AM

Also try
$("img").ready(function() {

});


But i'm not sure if this will execute after each image is loaded or what. As Jstall said $(document).ready would be better.

This post has been edited by codeprada: 13 April 2011 - 07:45 AM

Was This Post Helpful? 0
  • +
  • -

#4 GhandiJones  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 54
  • View blog
  • Posts: 174
  • Joined: 17-March 11

Re: Running script after all images load...

Posted 13 April 2011 - 04:07 PM

I'm already rocking (document).ready... It's still loading the background before the images load, and their file size is minimal. The majority are under 1kb, the largest being 3kb. So, I'm not sure. I'll post my code when I get home.

I'm curious if I need to use the dom to find out if the elements have loaded first, then run my function..? I'm just working on an experimental web build, playing around with jquery and I can't seem to achieve the result I want.

This post has been edited by GhandiJones: 13 April 2011 - 04:38 PM

Was This Post Helpful? 0
  • +
  • -

#5 GhandiJones  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 54
  • View blog
  • Posts: 174
  • Joined: 17-March 11

Re: Running script after all images load...

Posted 14 April 2011 - 03:24 AM

In an external .js:
function bgColor(){

	var ulineBG = 'rgb(' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ')';

	jQuery('.uline').css( 'background-color', ulineBG );
	jQuery('#sidebar').css( 'background-color', ulineBG );
	jQuery('#ftr_wrap').css( 'background-color', ulineBG );

    uline();
	
}



On the page:
<script type="text/javascript">

jQuery(document).ready(function() {

bgColor();

});

</script>


And the part on the page is right before the closing body tag. I just don't get why it's doing it.

This post has been edited by GhandiJones: 14 April 2011 - 03:25 AM

Was This Post Helpful? 0
  • +
  • -

#6 codeprada  Icon User is offline

  • Changed Man With Different Priorities
  • member icon

Reputation: 947
  • View blog
  • Posts: 2,355
  • Joined: 15-February 11

Re: Running script after all images load...

Posted 14 April 2011 - 07:22 AM

I have a way in which you can load .uline, #sidebar and #ftp_wrap respectively.

It is unorthodox but it answers your question. Placing your scripts inline will cause the page to execute it while loading the DOM.

N.B. You can't execute functions on DOM elements until they've been created though.

...
<body>
	<div class="uline">
		<!-- code -->
	</div>
	<script>$(".uline").css('background-color', 'color here');</script>
	<div id="sidebar">
		<!-- code -->
	</div>
	<script>$("#sidebar").css('background-color', 'color here');</script>
	...
</body>
...



I'm a bit skeptical about the elements with the class uline. Any elements with that class created after the script is executed won't adhere to the background-color you set. So place the script after all the elements with uline have been created to avoid problems.

This post has been edited by codeprada: 14 April 2011 - 07:25 AM

Was This Post Helpful? 0
  • +
  • -

#7 GhandiJones  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 54
  • View blog
  • Posts: 174
  • Joined: 17-March 11

Re: Running script after all images load...

Posted 15 April 2011 - 03:35 AM

That's the thing... the script is executed after everything is sent to the browser and the images are tiny. I've set the background color for each element to match the background of my body, then I append the new background color after I process everything else and post the script. It still adds the new background color before the images post and some are super bright, due to the random nature of the assignment. I don't want to see a bright pink square that is 200px wide while the image loads. I'd rather have the initial background color show until the images load. And the inline thing is no different.

This post has been edited by GhandiJones: 15 April 2011 - 03:41 AM

Was This Post Helpful? 0
  • +
  • -

Page 1 of 1