点击完成后调用函数[重复]答案

【问题标题】：Calling function after on click is finished [duplicate]点击完成后调用函数[重复]
【发布时间】：2014-12-19 13:21:21
【问题描述】：

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

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

预览图片源也是动态创建的，点击图片的源路径是另外一个目录。

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

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

【问题讨论】：

你需要等待元素的onload事件触发，然后询问元素的width
何时加载“#maximized_image”，是页面加载还是页面加载后将这些图像动态注入页面？根据这将确定您需要观看哪个元素的 onload 事件。
我的方法是把图片的名字注入到源路径中。
然后你需要观察元素的onload事件，当它触发时再读取width。
但它根本不会触发...

标签： javascript jquery html css image

【解决方案1】：

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

我建议虽然你加载图像然后加载到带有很好的淡入淡出效果或其他东西的栏中，我敢肯定轻微的 300 毫秒等延迟不会产生太大的影响？

对图像使用类似 onLoad 的方法会显示图像何时加载，但仍需要先渲染

【讨论】：

当onload事件被触发时，无论浏览器渲染与否，DOM都会得到元素大小的信息。
是的，但问题是同时显示栏和图像，并且在图像加载后仍然会发生 onLoad 事件。我想你可以结合这两个概念（onLoad 或屏幕外渲染图像）
问题中的一个关键问题是：“但我的问题是，有时显然图像是在定义宽度后加载的，所以我的宽度为 0”。这与实际图像的渲染无关，即使您在屏幕外渲染，仍然需要首先知道图像大小，这在 onload 是已知的。

【解决方案2】：

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

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

jquery load event

【讨论】：

这是我的第一个意图，但 .load-event 没有被触发。