CODEWITHSUNDEEP
javascriptjquery
ketysek
ketysek

Reputation: 1219

JQuery load image before show() function

I am trying to implement zoom (popup) effect on thumbnail image hover. I need to set position to center of the window height, but sometimes it fails, when the images aren't completely load (so I think the height of image is incorrect). How can I fully load image before it is shown? Thank you!

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

Upvotes: 0

Views: 944

Answers (1)

Lauromine
Lauromine

Reputation: 1493

Using the load event of the images, you can execute code when your image as been loaded.

Exemple :

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

If you run into cache issues and the function not being executed, take a look at this link : http://mikefowler.me/2014/04/22/cached-images-load-event/

Upvotes: 1

Related Questions