javascript - 创建随机图像交换并抑制鼠标悬停事件

Question

我试图创建一小段代码，将图像放在 HTML 页面上，然后当用户将鼠标悬停在其上时，每次都会出现一个新图像。我的代码的问题是，如果您在图像内移动鼠标，则由于鼠标悬停事件没有停止，各种图像会不稳定地闪烁。另一个小问题是，如果数组中的 0 索引处没有空占位符，我就无法让它工作。

我更好奇的是我应该如何看待问题而不是实际的解决方案。

<div id="myImage">
    <img id="theImg" src="whatever.png" alt="yay" height="42" width="42">
</div>

<script>

    imgs = ['placeholder','house','piggy','food'];

    $('#myImage').mouseenter(function(){

        $( "#theImg" ).remove();

        var rand = Math.floor(Math.random()*3)+1;

        $('#myImage').append('<img id="theImg" src=' + imgs[rand]  +'.png' + '>');

        console.log(imgs[rand]);
    });

</script>

Answer 1

我认为闪烁是由于您没有为新图像元素设置高度或宽度，因此发生了以下事件链:

• mouseenter 触发，导致删除当前 img 元素并插入新元素
• 这个新图像没有宽度或高度信息，因此在加载图像数据时元素会缩小到 0x0
• 现在浏览器有了图像数据，它可以直接从数据中获取宽度和高度，并将 img 设置为具有这些尺寸
• 因此，img 元素会扩展至此大小，从而使其在光标下扩展，从而触发另一个 mouseenter 事件

要避免这种情况，请在插入的 img 元素上设置宽度和高度，或者仅更改元素的 src 而不是胡乱删除和插入元素.