JQuery加载图像前显示()函数

JQuery load image before show() function

本文关键字：函数 显示 加载 图像 JQuery      更新时间：2023-09-26

我正在尝试实现缩略图图像悬停缩放(弹出)效果。我需要将位置设置为窗口高度的中心，但有时它会失败，当图像没有完全加载(所以我认为图像的高度是不正确的)。我如何在显示之前完全加载图像?谢谢你！

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

使用图像的load事件，您可以在加载图像时执行代码。

为例:

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

如果你遇到缓存问题，函数没有被执行，看看这个链接:http://mikefowler.me/2014/04/22/cached-images-load-event/

相关文章：