懒惰加载插件(jQuery)

$('a.lightBox').hover(function () {
    if (jQuery().lightBox) {
        // required,otherwise lightBox.js will be loaded on hover each time
        $("a.lightBox").lightBox({
            'type': 'iframe','overlayOpacity': 0.5,'width': 632,'hideOnContentClick': false
        });
    } else {
        // load script
        $.ajax({
            url: "js/lightBox.js",dataType: 'script',cache: true,success: function () {
                // load css
                $('head').append('<link rel="stylesheet" type="text/css" href="css/lightBox.css">');
                // lightBox function
                $("a.lightBox").lightBox({
                    'type': 'iframe','hideOnContentClick': false
                });
            }
        });
    }
});

…这在本地机器上完美运行,但在上传到服务器时效果不佳,因为12kb lightBox.js和lightBox.css需要一些时间来加载.

我想做其中任何一个：

>开始在悬停时加载js / css,但禁用’click’表示x秒,直到它们被加载.
> Onclick,将函数延迟x秒打开灯箱,直到加载js / css.
>加载页面后,延迟加载lightBox.js和lightBox.css约1分钟.

我更喜欢第三种选择,但不知道如何实现其中任何一种.

我很感激任何帮助！谢谢！

解决方法

success: function () {
    // load css
    $('head').append('<link rel="stylesheet" type="text/css" href="css/lightBox.css">');

    WaitLightBox(function () {/*lightBox funcion*/});
}


function WaitLightBox(callback)
{
    if (jQuery().lightBox === undefined)
        setTimeout(function(){WaitLightBox(callback);},100);
    else
        callback();
}