如何将图像预加载代码集成到我的当前代码中

How to integrate image preload code into my current code?

本文关键字：代码 我的 集成 图像 加载      更新时间：2023-09-26

当我的光标位于更改背景图像的链接上时，该图像会消失并重新出现。我知道 heppens，因为如果我在 js 中使用它们，我必须预加载图像。所以我找到了这个，我想使用第一个选项。但是我不知道如何将其集成到我的代码中。我在jsFiddle上的代码。你能帮忙做这件事吗？

.CSS 

body
    {
        background-image:url(Slike/Ozadja/Osnova.png);
        background-repeat:no-repeat;
        background-position:center;
        background-attachment:local;
        background-color: #FFFAF0;
        background-size:794px;
    }
    #layoutWidth div
    {
        width:628px;
        margin:auto;
        display:table;
        overflow:hidden;
    }
    div .header
    {
        height:85px;
        text-align:center;
        display:table-row;
    }
    div .menu 
    {
    height:173px;
    display:table-row;
    }
    #ddm
    {   margin-top: 30px;
        padding: 0;
        z-index: 30}
    #ddm li
    {   margin-left:12px;
        margin-top:10px;
        padding: 0;
        list-style: none;
        float: left;
        font: bold 100% arial}
    #ddm li a
    {   display: block;
        margin: 0 6px 0 0;
        padding: 4px 4px;
        width: 130px;
        background: transperent;
        color: #FFF;
        text-align: center;
        text-decoration: none}
    #ddm li a:hover
    {   background: transparent;
        color: #C0C0C0;
        }
    #ddm div
    {   position: absolute;
        visibility: hidden;
        margin-top:10px;
        padding: 0;
        background: transparent;
        }

        #ddm  div a
        {   position: static;
            display: block;
            margin-left: -16px;
            padding: 5px 10px;
            width: 150px;
            white-space: normal;
            text-align: center;
            text-decoration: none;
            background: transperent;
            color: #000;
            font: bold 11px arial;
            }
        #ddm div a:hover
        {   background: transparent;
            color: #696969}
    div .body
    {   
        height:650px;
        text-align: left;
        display:table-row;
    }
    div .footer 
    {   
        display:table-row;
    }

.HTML

<html>
<head>
<title>Drop-Down Menu</title>
    <meta name="keywords" content="">
    <meta name="description" content="">
    <meta http-equiv="Content-Type"
    content="text/html;charset=UTF-16">
    <link rel="stylesheet" type="text/css" href="Stil.css">
<!-- dd menu -->
<script type="text/javascript">
<!--
var timeout         = 500;
var closetimer      = 0;
var ddmenuitem      = 0;
var myImage         = {};
myImage.m1 = 'Prvi_predal.png';
myImage.m2 = 'Drugi_predal.png';
myImage.m3 = 'Tretji_predal.png';
myImage.m4 = 'Cetrti_predal.png';
function mopen(id)
{   
    mcancelclosetime();
    if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';
    ddmenuitem = document.getElementById(id);
    ddmenuitem.style.visibility = 'visible';
    document.body.style.backgroundImage = 'url(Slike/Ozadja/'+myImage[id]+')';
}

function mclose()
{
    if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';
    document.body.style.backgroundImage = 'url(Slike/Ozadja/Osnova.png)'
}
function mclosetime()
{
    closetimer = window.setTimeout(mclose, timeout);
}
function mcancelclosetime()
{
    if(closetimer)
    {
        window.clearTimeout(closetimer);
        closetimer = null;
    }
}
document.onclick = mclose; 
// -->
</script>
</head>
<body>
<div id="layoutWidth">
<div class="header">
<a href="Domov.html">
<img src="Slike/Logo/Logo.png" alt="Mankajoč logotip" width="279" height="80"></a>
</div>

<div class="menu">
<ul id="ddm">
    <li><a href="#" onmouseover="mopen('m1')" onmouseout="mclosetime()">Obdelava lesa</a>
        <div id="m1" class="prvi" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">
        <a href="#">Izdelki iz iverala</a>
        <a href="#">Izdelki iz masive</a>
        <a href="#">Obnova pohištva</a>
        </div>
    </li>
    <li><a href="#" onmouseover="mopen('m2')" onmouseout="mclosetime()">Talne obloge</a>
        <div id="m2" class="drugi" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">
        <a href="#">Laminat</a>
        <a href="#">Parket</a>
        </div>
    </li>
    <li><a href="#" onmouseover="mopen('m3')" onmouseout="mclosetime()">Ostale storitve</a>
        <div id="m3" class="tretji" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">
        <a href="#">Uporaba mavčnih plošč</a>
        <a href="#">Lažja zidarska dela</a>
        <a href="#">Fotografiranje dogodkov</a>
        <a href="#">Video zajem dogodkov</a>
        </div>
    </li>
    <li><a href="#" onmouseover="mopen('m4')" onmouseout="mclosetime()">Informacije</a>
        <div id="m4" class="cetrti" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">
        <a href="#">O podjetju</a>
        <a href="#">Kontakt</a>
        <a href="#">Kje se nahajamo</a>
        <a href="#">Galerija</a>
        </div>
    </li>
</ul>
<div style="clear:both"></div>
<div style="clear:both"></div>
</div>
<div class="body">
</div>
<div class="footer">
</div>
</div>
</body>
</html>

这是一个粗略的解决方案，它将强制浏览器加载和缓存所有这些图像。因此，当您更改背景图像时，将从缓存中获取。

在代码中添加预加载函数，就在这一行之前：document.onclick = mclose;

function preload() {
    var src, image, images = [];
    for (src in myImage) {
        if (typeof myImage[src] == 'string') {
                image = new Image();
                image.src = myImage[img];
                images.push(image);
        }
    }    
}
preload();

JsFiddle Code

相关文章：