带有预加载延迟的 jQuery 工具覆盖答案

【问题标题】：jQuery Tools Overlay with preload delay带有预加载延迟的 jQuery 工具覆盖
【发布时间】：2012-02-10 17:53:11
【问题描述】：

我正在使用来自 jQuery 工具的 Overlay 插件：http://flowplayer.org/tools/overlay/index.html 在单击链接时显示完整大小的图像，但覆盖会立即显示并显示图像加载。我想更改此行为并等到图像加载完毕后再启动叠加层。 Overlay 插件有一个 onBeforeLoad 属性，可以附加一个回调函数。但是，当然，一旦执行此回调，覆盖显示就会恢复，并且不会等待图像加载事件被触发。

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

这是一个简化的测试用例：http://jsfiddle.net/GlauberRocha/9jkU5/

有什么想法吗？

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

【问题讨论】：

你能再解释一下吗？你是什么意思它显示图像加载？查看您的 jsfiddle 似乎覆盖工作正常。
对不起，如果我的解释不清楚。是的，覆盖效果很好，但我不想在图像加载完成之前显示它。在我的测试中，setTimeout 只是模拟了image.onload 事件：我需要暂停执行覆盖，并在触发此事件时恢复。

标签： javascript jquery overlay jquery-tools

【解决方案1】：

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

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

var imageLoaded = false;

$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?

        if(!imageLoaded){
            setTimeout(function() { // This will be replaced by the image load event 
                console.log("Waiting is over!");

               api.load(); // Load the overlay now?
            }, 2000);
            imageLoaded = true;
            return false;
        }

    },
    onLoad: function() {
        console.log("onLoad");
    }
});

【讨论】：

谢谢，我会试试你的解决方案，但我不确定它是否完全符合我的要求。如果用户单击链接并且图像未完成加载，则叠加操作将不执行任何操作（并且用户必须在加载图像时再次单击才能显示叠加）。我想延迟操作，而不是取消它（我会在某处放置一个加载器图标，以便用户知道正在加载某些内容）。
在jsfiddle中，只需要点击链接一次。指定的超时完成后，将加载叠加层。
我已经检查过了。您的代码不像我想象的那样运行，但它仍然不起作用（您实际上会在打开的叠加层中看到图像加载）。
@GlauberRocha 没问题，我很高兴它帮助了你！

【解决方案2】：

我修改了我的代码。这个版本似乎可以工作（见http://jsfiddle.net/GlauberRocha/rwtvK/）。主要区别在于调用 API 方法的方式（$trigger.overlay().load() vs $trigger.data("overlay").load()）。这种不一致出现在 jQuery Tools 文档和示例中。

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

【讨论】：