dra*_*035 6 css google-chrome preloading
我正在使用以下技术预加载在悬停按钮时作为CSS背景图像应用的图像:
#preload_area {
background-image:
url(../images/image1.svg),
url(../images/image2.svg);
width: 0px;
height: 0px;
display: inline;
}
还试图预加载一个图像,这样:
#preload_area {
background: url(../images/image1.svg) -9999px -9999px no-repeat;
}
这些都不起作用:在硬刷新后,第一次悬停我的按钮时,我仍然看到一个闪烁(对应于加载悬停图像).显然,在第一次之后,再也没有眨眼了.
为什么不使用Chrome？(它适用于Firefox)
现场演示： http: //blackmiaool.com/soa/43093224/
没有人承诺会加载不可见的图像。浏览器有权不预加载不可见图像，因此您问题中的 css 方法可能在某些浏览器中不起作用。上面的demo是我自己写的。它实际上在屏幕上渲染图像以保证图像被加载。
HTML：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>test</title>
</head>
<body>
<h1 style="color:white;text-align:center;">Try to hover</h1>
<div class="show-area"></div>
<link rel="stylesheet" href="style.css">
<script src="../js/jquery.min.js"></script>
<script>
function preloadImage(src, cb) {
//create a image
const $dom = $("<img />", {
src: src
});
//check whether the image is already loaded
if ($dom[0].naturalWidth) {
cb && cb();
return;
}
//Put the image at the left bottom of the screen, and set its opacity to 0.01 to keep it from people eyes.
//Since it's actually rendered on the screen, the browser must load the image
$dom.css({
opacity: 0.01,
position: 'fixed',
bottom: 0,
left: 0,
height: 1,
width: 1,
'z-index': 10000,
'pointer-events': 'none',
});
$(document.body).append($dom);
//listen its `load` event to remove it and invoke callback
$dom.on("load", function() {
$dom.remove();
cb && cb();
});
}
//try to get the urls in the css file, and preload them
$("link").each(function() {
const href = $(this).attr("href");
$.get(href, function(style) {
const urls = [];
let match = style.match(/url\([\s\S]+?\)/g);
match.forEach(function(str) {
str = str.replace(/\s/g, "")
.replace(/^url\(/, "")
.replace(/\)$/, "");
let url = str.match(/^["']?([\S]+?)["']?$/);
if (!url || !url[1]) {
console.warn("Can't find url of " + str);
} else {
url = url[1];
preloadImage(url);
}
});
});
});
</script>
</body>
</html>
CSS：
body{
margin: 0;
background-color: black;
}
.show-area {
height: 100px;
width: 300px;
margin: auto;
margin-top: 100px;
background: url( ./1.jpg) no-repeat center;
background-size: contain;
}
.show-area:hover {
background-image: url("./2.jpg ");
}