How To Make Something Load First Before Another In Javascript And Jquery

I have a div with text in it and a background image. When I load the page the text always appear 1st(assume i have low speed internet connection). How can i make the background ima

Solution 1:

Add the text in the onload event handler for the image.

Note: If you want to keep using a div tag with a background image rather than an img tag, you'll have to add the text during the window.onload event (see this answer for the details).

Solution 2:

Assuming your div looks like this:

<div id="Derp" style="CSS-for-background-image-here">Magical ponies!</div>

I would try removing the text completely and then add this kind of jquery call:

<script>
    $(document).ready(function() {
        $('#Derp').load(function() {
            $('#Derp').text("Magical ponies!");
        });
    });
</script>

The $('#Derp').load(...) is the key here. See the docs for load(). It has an example of exactly what you need.

Solution 3:

you could populate the content onload.

Start with this:

<div id="content"></div>

Then, in jquery, do this:

 $(document).ready(function() {
    mybg= newImage(); 
    mybg.onload=function(){
      $('#content').html('YOURTEXTHERE');
    }
    mybg.src = "PATH/TO/IMG";
    });

Solution 4:

your simple answer is .load you can do when your window gets loaded fully and then text appears:

$(function(){
    $(window).load(function() {
        $('p').fadeIn(800);
    });​
});

what this is doing is fading in the p tag with text when whole window gets loaded.

you can find a demo here: http://jsfiddle.net/a5P8b/