懒加载一个插件（jQuery）

Question

$('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. 单击后，延迟x秒执行函数以打开灯箱，直到js/css加载完成。
3. 在页面加载后大约1分钟延迟加载lightbox.js和lightbox.css。

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

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

- eozzy

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

- BrunoLM

Answer 2

您可以使用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');
});

你可以使用CSS文件来做类似的事情。请注意，在StackOverflow和jQuery文档中都有关于jQuery的AJAX加载的详细记录。

- Mark Schultheiss

---

使用$.ajax()已经实现了虚拟包含，我猜？问题是我想要延迟它，在页面加载后x秒钟。 - eozzy

你可以在页面加载时使用超时将调用放入其中：setTimeout("includeJS('js/lightbox.js')",10000);将超时时间更改为您希望的时间即可。 - Mark Schultheiss

Answer 3

好的，这对我有效：

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

- eozzy

Answer 4

我在这里看到了类似的东西 http://www.1stwebdesigner.com/development/quick-tip-get-more-efficient-with-jquerys-getscript/，不知道是否有帮助。

- CIDIC