延迟加载插件(jQuery) [英] Lazy loading a plugin (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需要花费一些时间来加载.

... 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.

我想做这两个:

1. 在悬停状态下开始加载js/css，但是禁用单击"功能x秒钟，直到它们被加载.
2. Onclick，将功能延迟x秒以打开灯箱，直到加载js/css.
3. 页面加载后，将lightbox.js和lightbox.css的加载延迟大约1分钟.

我更喜欢第3个选项，但不知道如何实现其中的任何一个.

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

我将不胜感激！谢谢！

推荐答案

好的，这对我有用:

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

这篇关于延迟加载插件(jQuery)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！