我使用的是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/