Question

我正在使用jQuery Tools的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");
    }
});

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

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

jQuery工具覆盖预加载延迟

2 个答案: