Question

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

图像没有一致的宽度，因此每次选择新图片时我都需要调整条形图。

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

要调整条形码，我要求预览图像的宽度：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);

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

Answer 1

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

我建议你加载图像然后在条形图中加载一个漂亮的淡入淡出效果或其他东西，我确定一个小的300毫秒等延迟不会产生太大的差异？

对图像使用类似onLoad的内容会说明图像何时加载但仍需要首先渲染

Answer 2

在页面完全加载时运行一个函数，包括图形：

$( window ).load(function() {
  // Run code
});

jquery load event

点击完成后调用功能

2 个答案: