我使用的是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");
    }
});

最佳答案

好吧,我想我知道你想要什么。为了防止覆盖层加载,您需要返回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");
    }
});

关于javascript - 带有预加载延迟的jQuery工具覆盖,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/9198113/

10-12 03:55
查看更多