javascript - 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事件，您可以在图像加载时执行代码。

示例:

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

如果您遇到缓存问题并且函数未执行，请查看此链接:http://mikefowler.me/2014/04/22/cached-images-load-event/