Home > Article > Web Front-end > The css background image is loaded first and then rendered. I hope everyone will take a look_html/css_WEB-ITnose
I have three background images, but because the x and y axes have to be tiled, I can’t use css sprites. However, I want these three background images to be displayed at the same time, either not displayed or displayed at the same time. So I want to load these three images first and then start css rendering. How can this be done?
Thank you everyone ~
<!DOCTYPE HTML><html> <head> <meta charset="gb2312" /> <title></title> </head> <body> <div id="test" style="width:120px; height:120px;"></div> <script> function $(el){ return typeof el == 'string' ? document.getElementById(el) : el; } var img = new Image; img.src = 'http://avatar.profile.csdn.net/D/2/3/2_yiqiejieruying.jpg'; img.onload = function(){ $('test').style.backgroundImage = 'url('+img.src+')'; } </script> </body></html> HTML code
fef50554eca1a427827adaa329da8122
100db36a723c770d327fc0aef2ce13b1
> ">16b28748ea4df4d9c2150843fecfba68
…
Well, although it doesn’t work, I still thank you (*^__^*) Hehe...