Question

我想延迟加载图片：每次鼠标悬停时悬停1秒钟。

这可能吗？

代码是：

<style>
#bg {background-image: url(bg.png);
background-repeat: no-repeat;
position:absolute;  
margin-left: auto; margin-right: auto;display: block;
height: 354px;width: 571px;
border: 1px solid #000000; }
#delay {position: absolute;  
width: 100%;  
height: 354px;  
}
#delay:hover {background: transparent url(delay.png) no-repeat;}  
</style>
</head>

<body>
<div id="bg"> </div>
<div id="delay"> </div>

Answer 1

你可以使用CSS过渡来做到这一点，在0秒内将不透明度从0改为1，延迟时间为1秒：

#delay {
    background: transparent url(delay.jpg) no-repeat;
    opacity: 0;
   -webkit-transition: opacity 0s linear;
   -o-transition: opacity 0s linear;
}
#delay:hover {
   -webkit-transition-delay: 1s;
   -o-transition-delay: 1s;
   opacity: 1
}

目前仅支持Chrome / Safari / Opera

Answer 2

您应该在页面上预先加载背景图片。

.hover:before {
  content: url("/hover-image-path.jpg");
  width:0;
  height:0;
  visibility:hidden;
  position: absolute;
}

使用id：hover css3或html5延迟加载背景图像

2 个答案: