如何防止图像在第一次悬停时闪烁

Question

我对javascript不太好，我不知道如何做“预加载”图像，这是我认为我必须在这里做的事情？

如果您访问此网站，当您第一次将鼠标悬停在图像上时，它们会闪烁白色。但从那时起他们就很好，一切看起来都不错。这一开始很烦人，我想避免它。我已将我所拥有的JS移动到页脚中，但除此之外我不知道该怎么做才能修复它。建议？ Here is the website.

以下是css代码：

.primaryContainer {
  height: auto;
  margin-left: auto;
  margin-right: auto;
  min-height: 100%;
  width: 100%;
  position: relative;
  min-width: 0;
  max-width: none;
}
#partycontainerforbgimages {
  float: left;
  height: 100%;
  margin-left: 0;
  margin-top: -45px;
  clear: none;
  width: 100%;
  min-width: 0;
  position: relative;
  display: block;
  min-height: 0;
}
#paintpartyimgcontainer {
  float: none;
  height: 650px;
  clear: none;
  width: 59.99976%;
  position: absolute;
  top: 0;
  left: 40.265253%;
  z-index: 0;
  display: block;
  min-height: 0;
  background-image: url(img/glowparty_hover.png);
  background-attachment: scroll;
  -webkit-background-size: cover;
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: no-repeat no-repeat;
  -webkit-transition: all .15s linear;
  transition: all .15s linear;
}
#_5kimgcontainer {
  float: left;
  height: 650px;
  clear: none;
  width: 60%;
  position: absolute;
  z-index: 8;
  border-right-color: rgba(0, 0, 0, 0.952941);
  border-right-width: 14px;
  border-right-style: solid;
  display: block;
  min-height: 0;
  background-image: url(img/5kimg_hover.jpg);
  background-attachment: scroll;
  -webkit-background-size: cover;
  background-size: cover;
  min-width: 0;
  background-position: 50% 50%;
  background-repeat: no-repeat no-repeat;
  -webkit-clip-path: polygon(0 0, 100% 0%, 75% 100%, 0% 100%);
  clip-path: polygon(0 0, 100% 0%, 75% 100%, 0% 100%);
  -webkit-transition: all .15s linear;
  transition: all .15s linear;
}
#_5kimgcontainer:hover {
  display: block;
  opacity: 1;
  background-image: url(img/5kimg.jpg);
  background-attachment: scroll;
  -webkit-background-size: cover;
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: no-repeat no-repeat;
}
#paintpartyimgcontainer:hover {
  background-image: url(img/glowparty.png);
  background-attachment: scroll;
  -webkit-background-size: cover;
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: no-repeat no-repeat;
}
#_5k_container {
  float: left;
  height: 100%;
  clear: none;
  width: 50%;
  min-width: 0;
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  min-height: 0;
}
#paintparty_container {
  float: left;
  height: 100%;
  clear: none;
  width: 50%;
  min-width: 0;
  position: absolute;
  top: 0;
  left: 50%;
  display: block;
  min-height: 0;
}
#_5k {
  float: left;
  width: 242.5px;
  max-width: 252.5px;
  height: 253px;
  margin-left: 25.227476%;
  margin-top: -165.75px;
  clear: none;
  color: #000;
  position: relative;
  top: 0;
  left: 0;
  min-width: 242.5px;
  min-height: 253px;
  padding-right: 0;
  margin-right: 30px;
  max-height: 253px;
  -webkit-transition: all .15s linear;
  transition: all .15s linear;
}
#paintparty {
  float: left;
  width: 220.515625px;
  max-width: 316.11px;
  height: 217px;
  margin-left: 40.928819%;
  margin-top: 232px;
  clear: none;
  color: #000;
  position: relative;
  top: 0;
  left: 0;
  min-width: 220.52px;
  min-height: 217px;
  max-height: 310px;
  -webkit-transition: all .15s linear;
  transition: all .15s linear;
}
#pickyourpartybox {
  float: none;
  height: 117px;
  clear: none;
  width: 180px;
  position: relative;
  top: 0;
  left: 0;
  z-index: 16;
  border: 5px solid #efeeee;
  border-top-left-radius: 17px;
  border-top-right-radius: 17px;
  border-bottom-right-radius: 17px;
  border-bottom-left-radius: 17px;
  -webkit-box-shadow: rgba(0, 0, 0, 0.309804) 0 0 7px 3px;
  box-shadow: rgba(0, 0, 0, 0.309804) 0 0 7px 3px;
  margin-top: 258px;
  margin-left: 87.653061%;
  background-color: rgba(0, 0, 0, 0.560784);
  margin-right: 30px;
}
#logo_overlay_grouping {
  float: left;
  height: 100%;
  clear: none;
  width: 100%;
  position: relative;
  top: 0;
  left: 0;
  z-index: 26;
  display: block;
  min-height: 0;
  overflow: visible;
  margin-top: -45px;
  margin-left: 0;
}
#pickyourpartytext {
  float: none;
  font-size: 2em;
  width: 62.115127%;
  height: auto;
  text-align: center;
  font-weight: 400;
  line-height: 1em;
  margin: 23px auto 0;
  clear: none;
  min-height: 78px;
  font-family: helvetica;
  text-transform: uppercase;
  color: #efeeee;
}
#header {
  float: none;
  height: 45px;
  clear: none;
  width: 100%;
  min-width: 0;
  position: relative;
  border-bottom-color: rgba(0, 0, 0, 0.843137);
  border-bottom-width: 6px;
  border-bottom-style: solid;
  display: block;
  background-color: rgba(0, 0, 0, 0.843137);
  top: 0;
  left: 0;
  z-index: 10;
  -webkit-box-shadow: rgba(0, 0, 0, 0.843137) 0 3px 3px 0;
  box-shadow: rgba(0, 0, 0, 0.843137) 0 3px 3px 0;
}
#headernav {
  float: none;
  height: 30px;
  margin: 0 auto;
  clear: none;
  width: 545px;
  padding: 15px 0;
  position: static;
  top: 0;
  left: 0;
}
#facebooklink {
  float: left;
  font-size: 1em;
  width: auto;
  height: auto;
  text-align: left;
  font-weight: 400;
  line-height: .3em;
  margin-left: .00390625%;
  margin-top: 0;
  clear: none;
  min-height: 0;
  margin-right: 0;
  color: #ec89ee;
  font-family: helvetica;
  display: block;
  -webkit-transition: all .15s linear;
  transition: all .15s linear;
}
#twitterlink {
  float: left;
  font-size: 1em;
  width: auto;
  height: auto;
  text-align: left;
  font-weight: 400;
  line-height: .3em;
  margin-left: 24.009454%;
  margin-top: 0;
  clear: none;
  min-height: 0;
  display: block;
  margin-right: 0;
  color: #4bd3ef;
  font-family: helvetica;
  -webkit-transition: all .15s linear;
  transition: all .15s linear;
}
#instagramlink {
  float: left;
  font-size: 1em;
  width: auto;
  height: auto;
  text-align: left;
  font-weight: 400;
  line-height: .3em;
  margin-left: 24.009454%;
  margin-top: 0;
  clear: none;
  min-height: 0;
  display: block;
  margin-right: 0;
  color: #7fee81;
  font-family: helvetica;
  -webkit-transition: all .15s linear;
  transition: all .15s linear;
}
#footer {
  float: left;
  height: 45px;
  clear: none;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.843137);
  -webkit-box-shadow: rgba(0, 0, 0, 0.843137) 0 -3px 3px 0;
  box-shadow: rgba(0, 0, 0, 0.843137) 0 -3px 3px 0;
  position: fixed;
  top: 94%;
  left: 0;
  z-index: 15;
  overflow: scroll;
  right: auto;
  bottom: auto;
}
#footer_text {
  float: none;
  font-size: .5em;
  width: 38.45%;
  height: auto;
  text-align: center;
  font-weight: 400;
  line-height: .5em;
  margin-left: auto;
  margin-top: 0;
  clear: none;
  min-height: 100%;
  font-family: helvetica;
  color: #efeeee;
  padding-top: 11px;
  margin-right: auto;
}
#textspan {
  float: none;
  font-size: .6em;
  line-height: 1em;
  font-weight: 300;
}
#_5k:hover {
  width: 252.5px;
  min-width: 0;
  display: block;
  min-height: 263px;
  height: 263px;
  max-width: 252.5px;
  max-height: 263px;
}
#paintparty:hover {
  width: 224.515625px;
  min-width: 224.52px;
  display: block;
  height: 221px;
  min-height: 221px;
  max-width: 224.52px;
  max-height: 221px;
}
#textspan1 {
  float: none;
  font-size: 1em;
  line-height: 1em;
}
#facebooklink:hover {
  color: rgba(236, 137, 238, 0.74902);
}
#twitterlink:hover {
  color: rgba(75, 211, 239, 0.74902);
}
#instagramlink:hover {
  color: rgba(127, 238, 129, 0.74902);
}
@media only screen and (max-width: 750px) {
  #_5kimgcontainer {
    width: 100%;
    position: static;
    top: 0;
    left: 0;
    display: none;
  }
  #paintpartyimgcontainer {
    width: 100%;
    position: static;
    top: 0;
    left: 0;
    margin-top: 0;
    margin-left: 40.264583%;
    clear: none;
    display: none;
  }
  #pickyourpartybox {
    display: none;
  }
  #_5k_container {
    width: 100%;
    position: static;
    top: 0;
    left: 0;
    margin-top: -7px;
    margin-left: auto;
    clear: none;
    margin-right: auto;
    float: none;
    height: 107.54818%;
    background-image: url(img/5kimg_hover.jpg);
    background-attachment: scroll;
    -webkit-background-size: cover;
    background-size: cover;
    background-position: 50% 50%;
    background-repeat: repeat repeat;
    border-bottom: 10px solid #000;
    -webkit-box-shadow: 0 10px 5px -8px rgba(0, 0, 0, 0.75);
    -moz-box-shadow: 0 10px 5px -8px rgba(0, 0, 0, 0.75);
    box-shadow: 0 10px 5px 17px rgba(0, 0, 0, 0.75);
  }
  #paintparty_container {
    width: 100%;
    position: static;
    top: 0;
    left: 0;
    margin-top: 0;
    margin-left: auto;
    clear: none;
    margin-right: auto;
    float: none;
    height: 100%;
    background-image: url(img/glowparty_hover.png);
    background-attachment: scroll;
    -webkit-background-size: cover;
    background-size: cover;
    background-position: 50% 50%;
    background-repeat: no-repeat no-repeat;
    -webkit-box-shadow: inset 0 4px 5px 0 rgba(0, 0, 0, 0.75);
    -moz-box-shadow: inset 0 4px 5px 0 rgba(0, 0, 0, 0.75);
    box-shadow: inset 0 4px 5px 0 rgba(0, 0, 0, 0.75);
  }
  #_5k {
    margin: 100px auto 57px;
    float: none;
    clear: none;
  }
  #paintparty {
    margin: 100px auto 57px;
    float: none;
    clear: none;
  }
  #pickyourpartytext {
    width: 0;
  }
  #logo_overlay_grouping {
    position: static;
    top: 0;
    left: 0;
    width: 100%;
  }
  #_5k_container:hover {
    background-image: url(img/5kimg.jpg);
    background-attachment: scroll;
    -webkit-background-size: cover;
    background-size: cover;
    background-position: 50% 50%;
    background-repeat: no-repeat no-repeat;
  }
  #footer {
    width: 100%;
    clear: both;
    bottom: auto;
    top: 96.3%;
  }
  #partycontainerforbgimages {
    margin-top: 0;
  }
  #footer_text {
    margin-top: 0;
    clear: none;
    line-height: 1em;
    width: 77.45%;
    font-size: .4em;
  }
  #paintparty_container:hover {
    background-image: url(img/glowparty.png);
    background-attachment: scroll;
    -webkit-background-size: cover;
    background-size: cover;
    background-position: 50% 50%;
    background-repeat: no-repeat no-repeat;
  }
  #textspan1 {
    line-height: 1em;
    font-size: 1em;
  }
}
@media only screen and (max-width: 650px) {
  #twitterlink {
    margin-left: 15%;
  }
  #instagramlink {
    margin-left: 15%;
  }
  #headernav {
    width: 400px;
  }
}
@media only screen and (max-width: 433px) {
  #twitterlink {
    margin-left: 15%;
  }
  #instagramlink {
    margin-left: 15%;
  }
  #headernav {
    width: 272px;
  }
}

以下是HTML：

<!DOCTYPE html>
<html>

<head>
<link rel="stylesheet" href="boilerplate.css">
<link rel="stylesheet" href="page.css">
<meta charset="utf-8">
<meta name="viewport" content="initial-scale = 1.0,maximum-scale = 1.0">
</head>
<body>

<div id="primaryContainer" class="primaryContainer clearfix">
    <div id="header" class="clearfix">
        <div id="headernav" class="clearfix">
            <a id="facebooklink" href="https://www.facebook.com/colormycollege5K" target="_blank"><i class="fa fa-facebook-square" aria-hidden="true"></i> Facebook</a>
            <a id="twitterlink" href="https://twitter.com/colormycollege" target="_blank"><i class="fa fa-twitter-square" aria-hidden="true"></i> Twitter</a>
            <a id="instagramlink" href="https://www.instagram.com/colormycollege/" target="_blank"> <i class="fa fa-instagram" aria-hidden="true"></i> Instagram</a>
  </div>
    </div>
    <div id="logo_overlay_grouping" class="clearfix">
        <div id="_5k_container" class="clearfix">
            <div id="pickyourpartybox" class="clearfix">
                <p id="pickyourpartytext">
                <span id="textspan">PICK YOUR</span><br />PARTY
                </p>
            </div>
            <a href="http://www.5k.colormycollege.com/">
                <img id="_5k" src="img/logo_5k.png" class="image" />
            </a>
        </div>
        <div id="paintparty_container" class="clearfix">
            <a href="#">
                <img id="paintparty" src="img/Logo_paint.png" class="image" />
            </a>
        </div>
    </div>
    <div id="partycontainerforbgimages" class="clearfix">
        <div id="_5kimgcontainer" class="clearfix">
        </div>
        <div id="paintpartyimgcontainer" class="clearfix">
        </div>
    </div>
</div>
</body>
<footer>
<div id="footer" class="clearfix">
        <p id="footer_text">
        &copy; Copyright 2016. All Rights Reserved.  &#x7c; Design By&#x3a; <a id="textspan1" href="#" target="_blank">Cyndee Adkins Design&nbsp;</a><br />
        </p>
    </div>
        <script src="https://use.fontawesome.com/0847995977.js"></script>
    </footer>
 </html>