Mouseover и Mouseout не работают при продолжении процесса загрузки - PullRequest
Новая
       54

Mouseover и Mouseout не работают при продолжении процесса загрузки

0 голосов
/ 30 марта 2019

У меня есть событие mouseover и событие mouseout, которое показывает и скрывает изображения ... Это работает нормально, пока изображение полностью кэшируется / загружается.

Если я перехожу на изображение и оставляю определенныйdiv (где должны накапливаться mouseover и mouseout) быстро во время процесса загрузки, событие mouseout не сработает, и изображение всегда будет отображаться до тех пор (только если я повторно войду и уйду с кэшированным изображением, оно будет работать правильно).Я предполагаю, что jquery застревает в процессе загрузки изображения и не распознает событие mouseout.Есть ли какое-либо исправление? 

$(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");
     });

Точно такая же ошибка возникает при использовании mouseenter / mouseleave.

1 Ответ

0 голосов
/ 31 марта 2019

на всякий случай, если у кого-то есть такая же проблема ...

Я не смог стереть ошибку, потому что jquery, похоже, пропускает событие mouseout / mouseleave, когда происходит .onload для изображения.Кроме того, быстрое движение мыши увеличивает частоту ошибок.

Я только что сделал небольшой обходной путь: 

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

, который делает трюк ...

...