I am aware of ways I can preload images (and css files) using hidden embedded tags/includes, css styles and javascript but these all rely on the need to embed an extra tag or css rule to load each of these files and for each new image I must remember to add in another preload rule.
What I am looking for and can’t seem to find anywhere is a way to scan CSS files (using JS) to identify all url(…)’s within the css file so I can then preload these images. This would mean that if I go in and add another background-image to a style I know it will be found and preloaded without me doing anything
Essentially I would like to have two functions:
Preloader.loadCss(filePath, preloadImages);
Preloader.loadAllImagesInCssFiles();
The first function would preload a css file and then if required scan it for all images and preload them. The second function would scan all CSS files included within the page and load images used by these style sheets.
I’m hoping someone might have some ideas on how I might achieve this or know of an existing solution.
Yes, somebody has done this already with jQuery…
jQuery Script to Automatically Preload images from CSS