javascript - 带有预加载延迟的 jQuery 工具叠加

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