Javascript jQuery工具覆盖预加载延迟

我正在使用jquerytools中的Overlay插件：在单击链接时显示一个完整大小的图像，但是Overlay会立即显示并显示图像加载。 我想更改此行为，并等待图像加载后再启动覆盖。覆盖插件有一个onBeforeLoad属性，回调函数可以附加到该属性。但是，当然，一旦执行此回调，覆盖显示就会恢复，并且不会等待图像加载事件被触发

该插件有一些API方法，但它们似乎对我的目的没有多大帮助。 在我下面的例子中，我注释掉的两行应该可以让您了解我认为可能有效，但无效的内容

下面是一个简化的测试用例：

有什么想法吗

var $trigger = $("#trigger"),
    api;

$trigger.overlay({
    fixed: true,
    mask: {
        color: "#000",
        opacity: .8
    },
    onBeforeLoad: function() {
        console.log("onBeforeLoad");
        api = $trigger.data("overlay"); // see http://flowplayer.org/tools/overlay/index.html "Scripting API"
        //api.close(); // Temporarily "close" the overlay?
        setTimeout(function() { // This will be replaced by the image load event
            console.log("Waiting is over!");
            //api.load(); // Load the overlay now?
        }, 2000);
    },
    onLoad: function() {
        console.log("onLoad");
    }
});

---

好的，我想我明白你想要什么。要防止加载覆盖，您需要返回false，但仅当图像尚未加载时返回false。看看这是否有帮助：

---

我修改了我的代码。这个版本似乎有效（请参阅）。主要区别在于API方法的调用方式（

$trigger.overlay（）.load（）

与

$trigger.data（“overlay”）.load（）

）。jQuery工具文档和示例中存在这种不一致性

$(function () {
  var $trigger = $("#trigger");
  $trigger.overlay({
    fixed: true,
    mask: {
      color: "#000",
      opacity: .4
    },
    onBeforeLoad: function () {
      if (typeof this.init === "undefined") {
        this.init = true;
        setTimeout(function () { // This will be replaced by the image load event handler
          console.log("OK, let's show it!");
          $trigger.overlay().load(); // Load the overlay
        }, 5000);
        console.log("Not now!");
        return false;
      }
    }
  });
});

---

你能再解释一下吗？显示图像加载是什么意思？看看你的JSFIDLE，似乎覆盖层工作正常。如果我的解释不清楚，很抱歉。是的，覆盖工作正常，但我不想显示它，直到图像完成加载。在我的测试中，

setTimeout

只模拟了图像的内容。onload事件：我需要暂停覆盖的执行，并在触发此事件时恢复。谢谢，我将尝试您的解决方案，但我不确定它是否完全符合我的要求。如果用户单击链接，并且图像尚未加载完毕，则覆盖操作将不起任何作用（当加载图像时，用户必须再次单击以显示覆盖）。我想延迟操作，而不是取消它（我会在某处放置一个加载程序图标，以便用户知道正在加载某些内容）。指定的超时完成后，将加载覆盖。我已检查。你的代码并不像我想象的那样运行，仍然不起作用（你实际上可以在打开的覆盖图中看到图像加载）。@GlauberRocha没问题，我很高兴它帮助了你！

$(function () {
  var $trigger = $("#trigger");
  $trigger.overlay({
    fixed: true,
    mask: {
      color: "#000",
      opacity: .4
    },
    onBeforeLoad: function () {
      if (typeof this.init === "undefined") {
        this.init = true;
        setTimeout(function () { // This will be replaced by the image load event handler
          console.log("OK, let's show it!");
          $trigger.overlay().load(); // Load the overlay
        }, 5000);
        console.log("Not now!");
        return false;
      }
    }
  });
});