Question

我正在尝试创建一个带有运动部件的面部，以便稍后将其转变为虚拟助手。但是，当从一张嘴变成另一张嘴时，在显示样式图像之前，页面中会出现原始图像的非常短的闪烁。有没有办法删除此闪光灯？看起来不是很愉快：\

这显示了我的问题，https://imgur.com/x7kI4LN。口腔的原始图像在快速移动之前就闪烁了。

我做了一些研究，发现这个问题叫做FOOC（原始内容的闪光）。但是，我找不到解决该问题的解决方案。

_____ HTML_____

<html>
<head>
 <meta charset="utf-8"/>
 <link rel="stylesheet" href="style.css">
</head>
  <body bgcolor="#8133FF">

  <img id="head" src="FaceParts/head.png"/>
  <img id="mouthNeutral" src="FaceParts/mouth/mouthNeutral.png"/>

  <script type="text/javascript">
    var nameArray = ["mouthNeutral", "mouthSmile", "mouthSad",
        "mouthSadder", "mouthSurprised"];
    var myMouth = document.getElementById(nameArray[0]);
    var imageArray = ["FaceParts/mouth/mouthNeutral.png", 
        "FaceParts/mouth/mouthSmile.png",
        "FaceParts/mouth/mouthSad.png",
        "FaceParts/mouth/mouthSadder.png",
        "FaceParts/mouth/mouthSurprised.png"];
    var count = 1;

    //Function that loops through all mouths
    function changeMouth()
    {
    myMouth.setAttribute("src", imageArray[count]);
    myMouth.setAttribute("id", nameArray[count]);
    count++;
    if (count > 4) {count = 0}; 
    } 
  </script>

  <button onclick="changeMouth()">WHAAAT</button>
  </body>

</html>

____ CSS _____

#head {
width: 400px;
position: absolute; 
display: block;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
}

#mouthNeutral {
width: 150px;
position: absolute;
display: block;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, 620%);
} 

#mouthSmile {
width: 150px;
position: absolute;
display: block;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, 390%);
}

#mouthSad {
width: 150px;
position: absolute;
display: block;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, 690%);
}

#mouthSadder {
width: 150px;
position: absolute;
display: block;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, 340%);
}

#mouthSurprised {
width: 125px;
position: absolute;
display: block;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, 100%);
}

此外，如果您知道一种更有效的功能可以从一个嘴转换到另一个嘴，那么我愿意接受新的想法。预先感谢！

如何防止原始图像在样式设置之前在页面上闪烁（FOOC）

0 个答案: