JQuery load image before show() function

Question

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

Lauromine · Accepted Answer · 2015-09-12 17:25:28Z

1

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/

answered Sep 12, 2015 at 17:25

Lauromine

1,48310 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

JQuery load image before show() function

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related