延迟加载插件 (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',
                    'overlayOpacity': 0.5,
                    'width': 632,
                    'hideOnContentClick': false
                });
            }
        });
    }
});

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

我想做以下任一操作：

1. 悬停时开始加载 js/css，但禁用“单击”x 秒，直到加载完毕。
2. Onclick，延迟函数 x 秒打开灯箱，直到加载 js/css。
3. 页面加载后，延迟加载 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();
}