预加载CSS悬停图像是指在用户实际触发悬停效果之前,提前加载这些图像资源到浏览器缓存中。这样可以避免当用户首次悬停在元素上时出现图像加载延迟导致的闪烁或空白现象。
$(document).ready(function() {
// 获取所有需要预加载的悬停图像URL
var hoverImages = [];
// 查找所有有:hover伪类或data-hover属性的元素
$('[data-hover], :hover').each(function() {
var hoverImage = $(this).css('background-image') ||
$(this).attr('data-hover') ||
$(this).attr('hover-src');
if (hoverImage) {
// 提取URL(去除CSS的url()包装)
hoverImage = hoverImage.replace(/^url\(["']?/, '').replace(/["']?\)$/, '');
hoverImages.push(hoverImage);
}
});
// 去重
hoverImages = [...new Set(hoverImages)];
// 预加载所有图像
$.each(hoverImages, function(index, imageUrl) {
$('<img/>')[0].src = imageUrl;
});
});
function preloadHoverImages() {
var sheets = document.styleSheets;
var images = [];
// 遍历所有样式表
for (var i = 0; i < sheets.length; i++) {
var rules = sheets[i].cssRules || sheets[i].rules;
if (!rules) continue;
for (var j = 0; j < rules.length; j++) {
if (rules[j].selectorText && rules[j].selectorText.indexOf(':hover') !== -1) {
var bgImage = rules[j].style.backgroundImage;
if (bgImage && bgImage !== 'none') {
var url = bgImage.match(/url\(['"]?(.*?)['"]?\)/)[1];
images.push(url);
}
}
}
}
// 预加载图像
$(images).each(function() {
$('<img/>')[0].src = this;
});
}
$(document).ready(preloadHoverImages);
如果不想使用jQuery,也可以使用纯JavaScript实现:
document.addEventListener('DOMContentLoaded', function() {
var links = document.querySelectorAll('link[rel="stylesheet"]');
links.forEach(function(link) {
var sheet = link.sheet;
if (sheet) {
var rules = sheet.cssRules || sheet.rules;
if (rules) {
Array.from(rules).forEach(function(rule) {
if (rule.selectorText && rule.selectorText.includes(':hover')) {
var bg = rule.style.backgroundImage;
if (bg && bg.includes('url(')) {
var img = new Image();
img.src = bg.match(/url\(['"]?(.*?)['"]?\)/)[1];
}
}
});
}
}
});
});
以上方法可以帮助你有效地预加载CSS悬停图像,提升网站的用户体验。