Hi
I have a page with a bunch of divs set to display:none with 70kb background images. As buttons are clicked the divs are displayed. The background images are specified in an external stylesheet, pc firefox, mac ff, mac safari and every real browser ignors them until the div is set to display:block, awesome. IE7 still loads every single image when loading the site, is there a way around this? Its about 40 images so obv this is effecting load time
Hi
I have a page with a bunch of divs set to display:none with 70kb background images. As buttons are clicked the divs are displayed. The background images are specified in an external stylesheet, pc firefox, mac ff, mac safari and every real browser ignors them until the div is set to display:block, awesome. IE7 still loads every single image when loading the site, is there a way around this? Its about 40 images so obv this is effecting load time
Dynamicity is and should remain a javascript responsibility not CSS.
Images should be ready for interaction when page fires onload event no matter if their display property is set to none.
Although some new wannabe FAST browsers are using the cheat you mention and hundreds of others to compensate for their poor performance.
Each and every hardcoded element of the page content is required to be ready for display as soon as you've interacted with it, and every REAL responsible browser should provide it with competence.
The real conventional and traditional solution:
I believe you are using script to handle the display property of those divs and script is what you should use to set their background image property along with their display properties simultaneously.
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.