Загрузка изображения JQuery перед функцией show()

Question

Я пытаюсь реализовать эффект увеличения (всплывающего) эффекта при наведении указателя на миниатюру. Мне нужно установить положение в центр высоты окна, но иногда он терпит неудачу, когда изображения не полностью загружаются (поэтому я думаю, что высота изображения неверна). Как я могу полностью загрузить изображение до его показа? Спасибо!

var winHeight = $(window).height(); 

//image popup on hover 
$(".imageZoom").hover(function() { 
    $(this).parent().append("<div class='bigImage'><img src='"+ $(this).attr("href") +"'></div>"); 
    $(".bigImage").css("width", "50vw").css("max-width", "800").css("position", "absolute").css("display", "none"); 
    var imageHeight = $(".bigImage").height(); 
    var top = $(window).scrollTop(); 
    var imageTop = top; 
    if(imageHeight < winHeight) { 
     imageTop += Math.ceil((winHeight - imageHeight)/2); 
    } 

    $(".bigImage").css("top", imageTop).css("margin-left", 100).show(600); 
}, function() { 
    $(this).parent().find("div").remove(); 
}); 

Answer 1

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

Exemple:

$(".bigImage").on('load', function() { 
    //code 
}); 

Если вы столкнулись с проблемами кэширования и функция не выполняется, посмотрите на эту ссылку: http://mikefowler.me/2014/04/22/cached-images-load-event/