jQuery   发布时间:2022-04-19  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了懒惰加载插件(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','hideOnContentClick': false
                });
            }
        });
    }
});
@H_944_7@…这在本地机器上完美运行,但在上传到服务器时效果不佳,因为12kb lightBox.js和lightBox.css需要一些时间来加载.

@H_944_7@我想做其中任何一个

@H_944_7@>开始在悬停时加载js / css,但禁用’click’表示x秒,直到它们被加载.
> Onclick,将函数延迟x秒打开灯箱,直到加载js / css.
>加载页面后,延迟加载lightBox.js和lightBox.css约1分钟.

@H_944_7@我更喜欢第三种选择,但不知道如何实现其中任何一种.

@H_944_7@我很感激任何帮助!谢谢!

解决方法

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

大佬总结

以上是大佬教程为你收集整理的懒惰加载插件(jQuery)全部内容,希望文章能够帮你解决懒惰加载插件(jQuery)所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。