Mouseover and Mouseout do not work when onload process is proceeded

Question

I have a mouseover event and a mouseout event that shows and hide images... It works fine as long as the image is fully cached/loaded.

If I go over the image and leave the specific div (where mouseover and mouseout should trigger) fast during the load process, the mouseout event do not trigger and the image is always displayed until than (only if I reenter and leave with the cached image it works correctly). I guess that jquery is stuck in the onload process of the image and do not recognize the mouseout event. Is there any fix?

$(document).on('mouseover',".divclass", { ....

loadImage(urllink);

function loadImage(src) {
    var image = new Image();
    image.onload = function() {
        if ('naturalHeight' in this) {
            if (this.naturalHeight + this.naturalWidth === 0) {
                this.onerror();
                return;
            }
        } else if (this.width + this.height == 0) {
            this.onerror();
            return;
        }
        // At this point, there's no error. Picture is available:
        $('#picture').attr('src', urllink);
        $(".image-content").stop().fadeIn(200);
    };
    image.onerror = function() {
        //display noimg.png
        $('#picture').attr('src', ".../noimg.png");
        $(".image-content").stop().fadeIn(200);

    };
    image.src = src;
}
...
});

 $(document).on('mouseout',".divclass", function (e) {
    $('.image-content').css("display", "none");
     });

Exact the same bug happens when using mouseenter/mouseleave.

Does your container div have a height and width before the image is loaded? — Sean
its inside a td and it has height:100%, display: flex; justify-content: center; align-items: center; ... set in the css — hillcode
What is the rendered height of the div before the images try to load? — Sean
no the image is loaded in absolute position outside the "trigger div" ... so you hover over that div and the img is displayed. so if you hover during the loading process (onload in jquery) of the image in and out the mouseout effect does not trigger. Maybe I have to add that images are not preloaded by the page load.. they are loaded dynamically during the hover movement via jquery. — hillcode
It seems to be an interesting question that would benefit from containing a functional demo. — Shikkediel

hillcode hillcode · Accepted Answer · 2019-03-31T12:17:21

just in case someone has the same problem ...

I could not eraze the bug because jquery seems to skip the mouseout/mouseleave event when .onload for the image is going on. Furthermore a fast mouse movement increases the error rate.

I just did a small workaround:

   $(document).on('mousemove', function (e) {
     if ($(e.target).attr("class") !== "classname") { 
    $('.image-content').stop();
    $('.image-content').css("display", "none");
   e.stopPropagation();
     } else { return; }
     });

that do the trick ...

Mouseover and Mouseout do not work when onload process is proceeded

1 Answers