使用 onMouseOver(this) 更改背景图像会显示白色一秒钟。如何解决错误？ [复制]

Posted 2023-03-14

【中文标题】使用 onMouseOver(this) 更改背景图像会显示白色一秒钟。如何解决错误？ [复制]

【英文标题】：Changing background Image with onMouseOver(this) displays white for a second. How to solve the bug? [duplicate]

【发布时间】：2021-12-28 21:52:37

【问题描述】：

我正在使用onmouseover(this) 使用 javascript 更改背景图像。 "this" 是检索元素 id 的参数。 Id 是图像的名称。

我在 php 循环的帮助下通过 html 创建了带圆圈的气泡。每个气泡都显示为图像，它也是表单的输入。每次我将鼠标移到气泡上时，页面backgroundImage 应该会更改为特定图像。我还改变了每个气泡的比例和不透明度，但我认为这与此无关。

错误

刷新页面，前 2 次我将鼠标移到它错误的气泡上并显示白色背景大约一秒钟。在前 2 次之后，它工作正常。刷新会使该错误再次出现。我不明白为什么会出现这个错误以及如何解决它。

HTML

<!-- -----Bubbles (ROW/COL/TABLE/PHP)-----                                     -->
    <form action="/searches/se_racestandingsround" method="post">@csrf                                    
        <div class="row mt-5 mr-5 ml-5">
            <?php for($i=2021; $i>=1950; $i--) ?>
                <div class="col-3 d-flex flex-column align-items-center mb-3 mt-5">
                    <div class="w-50 mb-5 rounded-circle" style="height: 150px;">
                        <div class="bg-dark w-100 h-100 mb-5 border rounded-circle" id="<?php echo $i ?>" onmouseover="onMouseOver(this)" onmouseout="onMouseOut(this)">
                            <input class="round" type="hidden" name="round" id="<?php echo $i+100 ?>" value="">
                            <input class="rnd" type="hidden" name="rnd" id="<?php echo $i+200 ?>" value="">
                            <button style="object-fit:cover" class="w-100 h-100 border rounded-circle"><img src='/imgs/jpg/years/<?php echo $i ?>.jpg' style="object-fit:cover" class="w-100 h-100 border rounded-circle"></button>
                        </div>
                    </div>
                </div>
            <?php  ?>
        </div>
    </form>

JavaScript

function onMouseOver(year)
        var element = document.getElementById('conf');
        var curYear = year.id; 

        for(y=2021; y>=1950; y--)
            document.getElementById(y+100).value = curYear;
            document.getElementById(y+200).value = currentNumOfRounds;
        
        
  
        element.style.backgroundImage = "url('/imgs/jpg/yearswinner/"+curYear+".jpg')";
        for(i=2021; i>=1950; i--)
            if(i==curYear)
                document.getElementById(i).style.opacity = "1";
                document.getElementById(i).style.transition = "transform .2s";
                document.getElementById(i).style.transform = "scale(1.1)";
            else
                document.getElementById(i).style.opacity = "0.5";
                document.getElementById(i).style.transition = "transform .2s";
                document.getElementById(i).style.transform = "scale(0.9)";
                      
             
    

【问题讨论】：

这可能与页面未完成加载有关。我该怎么办？

【参考方案1】：

当您使用这行代码更改背景图像时，您会导致页面下载图像。

element.style.backgroundImage = "url('/imgs/jpg/yearswinner/"+curYear+".jpg')";

由于您与服务器的连接可能不是最快的，因此浏览器需要一段时间才能下载图像，并显示您的 #conf 元素，其中包含部分下载的图像。这就是为什么当您将鼠标悬停在气泡上的前一两次时它看起来是白色的。

您真正应该做的是在页面加载时加载所有内容并将其隐藏，直到您希望它显示为止，如下所示：

<img src='/imgs/jpg/yearswinner/whateveryear.jpg' id='winner-whateveryear' style='display:none'>

注意：这里的内联样式只是一个例子，使用其他东西

然后在您的 onMouseOver() 函数中，不要更改 #conf 元素的背景图像，而是使用

document.getElementById("winner-whateveryear").style.display = "block";