How to show the page when background image fully loaded?
Question
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>
2 answers
solution1
2 ACCPTED 2014-08-06 20:45:53
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.
solution2
0 2014-08-06 20:49:10
请查看此链接。最好将背景图片提供给您的图片标签
<img src='yourimage' id='img'/>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.