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
3
-
Can this help? stackoverflow.com/questions/476679/…Yoav Kadosh– Yoav Kadosh2012-12-17 16:41:30 +00:00Commented Dec 17, 2012 at 16:41
-
I don't really understand I was going to suggest chucking java at the bottomTheBlackBenzKid– TheBlackBenzKid2012-12-17 16:43:01 +00:00Commented Dec 17, 2012 at 16:43
-
For those answers suggesting the jQuery Load event, be sure to see the "caveats" section in the API: api.jquery.com/load-event. As such, I'd probably suggest user1026361's answer, if you are ok w/ preloading the image.Grinn– Grinn2012-12-17 16:50:43 +00:00Commented Dec 17, 2012 at 16:50
Add a comment
|
4 Answers
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).
Comments
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.
Comments
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";
});
Comments
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/
