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，而不是删除和插入元素。

创建随机图像交换并禁止鼠标悬停事件

1 个答案: