JQuery показать / скрыть большое изображение с помощью мыши

Question

Я использую этот код jquery, чтобы скрыть / показать изображение с фиксированной позицией:

$(document).on('mouseover',".multiverseid", function (e) {
  var mid = $(this).attr("id");
  $('#picture').attr('src', mid);
  $('.image-content').css("display", "flex");
});  
$(document).on('mouseout',".multiverseid", function (e) {
  $('#cardpicture').attr('src', "");
  $('.image-content').css("display", "none");
});

код работает отлично, пока изображение предварительно загружено. Когда я делаю наведение мыши на большом изображении, которое загружено не полностью, изображение не появляется, и даже нахождение в области наведения мыши дольше не показывает изображение. мне нужно выйти из области и снова войти в область наведения мыши, чтобы показать ее.

Итак, я попробовал это с этим кодом:

$(document).on('mouseover',".multiverseid", function (e) {
  var mid = $(this).attr("id");
  $('#picture').attr('src', mid);
  $("#picture").load(function() {
    $('.image-content').css("display", "flex");
  });  
});
$(document).on('mouseout',".multiverseid", function (e) {
  $('#cardpicture').attr('src', "");
  $('.image-content').css("display", "none");
});

но у меня не было успеха. Та же проблема. Что я делаю не так?

Answer 1

Вам не нужно удалять атрибут src для этого. Достаточно просто скрыть элемент с помощью display: none.

Установка src в пустую строку фактически отменяет процесс загрузки, и браузер, вероятно, сохраняет «неисправное» состояние в своем кэше.