Demo page for the article CSS throbbers – Part 2
Fig. Demonstrating a simple CSS throbber. Note that only a small part of the image is shown in the placeholder. This has been done to achieve a comparable user experience across the many different screen sizes and browser window settings out there. If you want to see Yan-o-pah as it was photographed in 1872, head off to the Google Art Project.
The waitForImage JavaScript plug-in for jQuery is used to hide the throbber once the image has fully downloaded. The plug-in should work with images referenced with src in HTML img tags and with images called via the background-image property in CSS.
In this example (with this throbber) the default slideUp() method in the plug-in distorts the look of the CSS throbber, so a function is called to hide the throbber as suggested by jvan27 at Stack Overflow. Dissect the page source to see the implementation.
If the page is reloaded/refreshed to repeat the demonstration, the browser cache should probaby be emptied first.
Return to the parent article for a discussion.