预加载 CSS 文件中定义的图像
我知道可以使用隐藏的嵌入标签/包含、css 样式和 javascript 预加载图像（和 css 文件）的方法，但这些都依赖于嵌入额外标签或 css 规则来加载每个文件以及每个新文件的需要image 我必须记住添加另一个预加载规则。
我正在寻找但似乎在任何地方都找不到的是一种扫描 CSS 文件（使用 JS）以识别 css 文件中所有 url(...) 的方法，以便我可以预加载这些图像。这意味着，如果我进去并向样式添加另一个背景图像，我知道它会被找到并预加载，而无需我做任何事情
本质上我想要两个函数：
Preloader.loadCss(filePath, preloadImages);
Preloader.loadAllImagesInCssFiles();
第一个函数将预加载一个 css 文件，然后如果需要的话扫描所有图像并预加载它们。第二个函数将扫描页面中包含的所有 CSS 文件并加载这些样式表使用的图像。
我希望有人可能对我如何实现这一目标有一些想法或了解现有的解决方案。
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.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
是的，有人已经用 jQuery 做到了这一点...
自动从 CSS 预加载图像的 jQuery 脚本
Yes, somebody has done this already with jQuery...
jQuery Script to Automatically Preload images from CSS