延迟加载插件（jQuery） $（'a.lightbox'）。悬停（函数（）{ if（jQuery（）.lightbox）{ //必需，否则每次悬停时都会加载lightbox.js $（“a.lightbox”）。lightbox({ 'type'：'iframe'， “产能过剩”：0.5， “宽度”：632， “hideOnContentClick”：false }); }否则{ //加载脚本 $.ajax({ url:“js/lightbox.js”， 数据类型：“脚本”， 是的， 成功：函数（）{ //加载css $（'head'）。追加（''）； //灯箱功能 $（“a.lightbox”）。lightbox({ 'type'：'iframe'， “产能过剩”：0.5， “宽度”：632， “hideOnContentClick”：false }); } }); } });

。。。这在本地机器上可以很好地工作，但在上传到服务器时就不太好了，因为12kb lightbox.js和lightbox.css需要一些时间来加载

我想做以下任一项：

在悬停状态下开始加载js/css，但在加载之前禁用“单击”x秒

单击后，将函数延迟x秒以打开lightbox，直到加载js/css

加载页面后，将lightbox.js和lightbox.css的加载延迟约1分钟

我更喜欢第三个选项，但不知道如何实现这些选项

我将感谢任何帮助！谢谢

成功：函数（）{
$('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
                });
            }
        });
    }
});

//加载css
$（'head'）。追加（''）；
WaitLightbox（函数（）{/*lightbox函数*/}）；
}
函数WaitLightbox（回调）
{
if（jQuery（）.lightbox==未定义）
setTimeout（函数（）{WaitLightbox（回调）；}，100）；
其他的
回调（）；
}

您可以使用jQuery部分在页面加载后加载函数，也可以使用不带计时器的ajax，只在页面准备好后加载

例如：

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

---

您可以对CSS文件执行类似的操作。注意，在StackOverflow和jquery文档的其他地方都有关于使用jquery加载ajax的详细文档。

好的，这对我来说很有用：

/* function to allow inclusion of other files 
Included this way to allow addition AFTER the page loads- that is, fake inclusion in this Javascript file
*/
function includeJS(jsPath)
{
    var script = document.createElement("script");
    script.setAttribute("type", "text/javascript");
    script.setAttribute("src", jsPath);
    document.getElementsByTagName("head")[0].appendChild(script);
};
$(function()
{
includeJS('js/lightbox.js');
});

setTimeout（函数（）{
$.ajax({
url:“js/lightbox.js”，
数据类型：“脚本”，
是的，
成功：函数（）{
$（'head'）。追加（''）；
$（“a.lightbox”）。lightbox({
'type'：'iframe'，
“产能过剩”：0.5，
“宽度”：632，
“transitionIn”：“弹性”，
“transitionOut”：“弹性”，
“hideOnContentClick”：false
});
}
});
}, 10000);

我在这里遇到了类似的东西，我不知道这是否有帮助。

我想已经使用$.ajax（）实现了伪包含？问题是我想在页面加载后将其延迟到x秒，这样您就可以使用timeout setTimeout（“includeJS（'js/lightbox.js'）”，10000）将调用放入页面加载中；将暂停次数更改为您希望的次数。。。

setTimeout(function(){
    $.ajax({
        url: "js/lightbox.js",
        dataType: 'script',
        cache: true,
        success: function () {
            $('head').append('<link rel="stylesheet" type="text/css" href="css/lightbox.css">');
            $("a.lightbox").lightbox({
                'type': 'iframe',
                'overlayOpacity': 0.5,
                'width': 632,
                'transitionIn': 'elastic',
                'transitionOut': 'elastic',
                'hideOnContentClick': false
            });
        }
    });
}, 10000);