How can I use yepnope.js with $(document).ready() effectively?

后端 未结 5 1735
刺人心
刺人心 2020-12-23 23:01

I have been implementing the yepnope script loader as part of the modernizr.js library. I have successfully got jQuery to load and jQuery dependent scripts afterwards. I am

5条回答
  •  南方客
    南方客 (楼主)
    2020-12-23 23:49

    Using guidance from @ezmilhouse, I thought about the best way to achieve what I was after while still keeping compatibility with our older code.

    My solution was to set up my yepnope scriptloader to load all necessary scripts in a hierarchical fashion, based on their individual dependencies. Once all scripts are loaded, you can use the complete property of my call to yepnope to call my ready function. This meant that the document was effectively ready and the code would work with no issues.

    I also moved my js to the base of my pages (something that I should have done a long time ago, but we had a lot of legacy pages! :) )

    Here is an example (using false libray/script names for illustration purposes only):

    yepnope({
        test: baseLib.debug,
        yep: { "max": "/version2/res/jquery/jquery-1.5.2.js" },
        nope: { "min": "/version2/res/jquery/jquery-1.5.2.min.js" },
        callback: {
            "max": function (url, result, key) {
                baseLib.Log("jQuery full loaded.");
            },
            "min": function (url, result, key) {
                baseLib.Log("jQuery min loaded.");
            }
        },
        complete: function () {
            if (window.$) {
                yepnope({
                    test: base.debug,
                    yep: {
                       "anotherscript": "script/url/here.js",
                       "anotherscript2": "script/url/here2.js"
                    },
                    nope: {
                        "anotherscript": "script/url/here-min.js",
                        "anotherscript2": "script/url/here2-min.js"
                    },
                    both: {
                        "anotherscript3": "script/url/here3.js"
                    },
                    callback: {
                        "anotherscript": function (url, result, key) {
                            baseLib.Log("anotherscript " + (result ? "Max" : "Min") + " loaded.");
    
                        },
                        "anotherscript2": function (url, result, key) {
                            baseLib.Log("anotherscript2 " + (result ? "Max" : "Min") + " loaded.");
                        },
                        "anotherscript3": function (url, result, key) {
                            baseLib.Log("anotherscript3 loaded.");
                        }
                    },
                    complete: function () {
                        baseLib.Log("Scripts Loaded");
                        baseLib.Page.Ready();
                    }
                });
    
            }
            else {
                baseLib.Log("Could not load jQuery. No further jQuery dependent files loaded.", "error");
            }
        }
    });
    

    In my page js I will assign a function to baseLib.Page.Ready that will then be called by yepnope on complete.

提交回复
热议问题