CODEWITHSUNDEEP
javascriptjquery
dramasea
dramasea

Reputation: 3490

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 image load before text? Can You please give me solution in both jquery and javascript

Upvotes: 0

Views: 16608

Answers (4)

Briguy37
Briguy37

Reputation: 8402

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).

Upvotes: 3

Jai
Jai

Reputation: 74738

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/

Upvotes: 0

Joel Peltonen
Joel Peltonen

Reputation: 13402

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.

Upvotes: 2

user1026361
user1026361

Reputation: 3657

you could populate the content onload.

Start with this:

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

Then, in jquery, do this:

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

Upvotes: 1

Related Questions