延迟加载插件 (jQuery)

发布于 2024-09-07 02:08:33 字数 1276 浏览 4 评论 0原文

$('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 需要一些时间来加载。

我想执行以下任一操作：

在悬停时开始加载 js/css，但禁用“单击”x 秒，直到它们加载为止。
Onclick，延迟函数 x 秒打开灯箱，直到加载 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
                });
            }
        });
    }
});

... this works perfectly on local machine, but not quite when uploaded to server because the 12kb lightbox.js and the lightbox.css takes some time to load.

I would like to do either of these:

Start loading js/css on hover, but disable 'click' for x seconds until they're loaded.
Onclick, delay the function for x seconds to open lightbox until the js/css are loaded.
Delay loading of lightbox.js and lightbox.css for about 1 min after the page has loaded.

I prefer the 3rd option, but have no idea how to implement any of these.

I'd appreciate any help! Thanks!

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

看海 2024-09-14 02:08:33

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

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

回复收藏 0 原文

独自←快乐 2024-09-14 02:08:33

您可以使用 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 文件执行类似的操作。请注意，使用 jquery 进行 ajax 加载在 StackOverflow 和 jQuery 文档的其他地方都有详细记录。

You can use the jQuery portion to load after the page loads with a function or ajax with no timers, just loads after the page is ready.

Example:

/* 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');
});

you can do similar with the CSS file. Note the ajax loading with jquery is well documented elsewhere on StackOverflow and the jQuery documentation.

回复收藏 0 原文

不及他 2024-09-14 02:08:33

好的，这对我有用：

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

Okay, this works for me:

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

回复收藏 0 原文