javascript - 点击完成后调用函数

标签 javascript jquery html css image

<分区>

我想创建一个图片预览插件，为此我想在预览图像下创建一个带有标题等的动态栏

图片的宽度不一致，所以我每次选择新图片时都需要调整栏。

预览图像源也是使用单击图像的源路径动态创建的，但另一个目录。

为了调整栏，我要求预览图像的宽度:var width = $("#maximized_image").width(); 我在设置预览源后直接调用它图片。

但我的问题是，有时显然图像是在定义宽度后加载的，所以我的宽度为 0 并且我的栏不可见。是否可以等待图像加载或强制 jquery 等待它？

或者有人有其他解决方案吗？

编辑: 这是我到目前为止所拥有的:

    var img = $(this).attr("src");
    var img_split = img.split('.');
    var img_path = img_split[0];
    var rest = img_path.substring(0, img_path.lastIndexOf("/") + 1);
    var last = img_path.substring(img_path.lastIndexOf("/") + 1, img_path.length);
    var max_image = rest + "/normal/" + last + "." + img_split[1];
    $("#image_maximizer").css("height", win_h).css("width", "100%").css("display", "block").css("background", "rgba(0, 0, 0, 0.6)");
    $("#render_img").attr("src", max_image);
    var width = $("#maximized_image").width();
    alert(width);

这设置了图像，但我没有得到图像的宽度

最佳答案

您可以加载图像但将其渲染到屏幕外，获取宽度，然后将其加载到您需要的位置(您不会加载它两次，因为它已经加载/缓存)

我建议您加载图像，然后加载带有漂亮的淡入淡出效果或其他效果的栏，我确信轻微的 300 毫秒等延迟不会造成太大差异吗？

对图像使用 onLoad 之类的东西会在加载图像时说明，但它仍然必须先渲染

关于javascript - 点击完成后调用函数，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27567035/