2

I have a background image and I want to use $(documnet).load() to set an event that shows the page whenever the image is fully loaded. How can I do that?

My HTML code:

<html>
    <script src="../js/jquery-1.10.2.js"></script>
    </script>
        <style>
              body{
                background-image: url('../images/heart-beat.png');
                -webkit-background-size: cover;
                -moz-background-size: cover;
                -o-background-size: cover;
                background-size: cover;
            }
        </style>
    <body>
    Hello World
    </body>
</html>
Sky
  • 4,244
  • 7
  • 54
  • 83
Daniel.V
  • 2,322
  • 7
  • 28
  • 58
  • 1
    If you are new to javascript and jQuery, I recommend the [jQuery learning center](http://learn.jquery.com/), especially the page about [different ways to run scripts](http://learn.jquery.com/javascript-101/running-code/). – Don Aug 06 '14 at 20:43
  • I would try something else. Have an empty page or a loader. Then load the image via ajax and on success display everything. – schemar Aug 06 '14 at 20:45
  • possible duplicate of [How can I check if a background image is loaded?](http://stackoverflow.com/questions/5057990/how-can-i-check-if-a-background-image-is-loaded) – Sky Aug 06 '14 at 20:53

2 Answers2

2

See this answer. Basically, you cannot detect the load event of a background image (it's supposed to happen in the background!) so you load the image using the image element, and then once it is loaded (and assumably cached in the browser) you set it to be the background image for the body.

Community
  • 1
  • 1
Hamilton Lucas
  • 419
  • 2
  • 5
0

please see this link .it's better to give background image to image tag in to ur body

<img src='yourimage' id='img'/>
Community
  • 1
  • 1
mkafiyan
  • 944
  • 2
  • 9
  • 31