search

rgrove / lazyload

:skull: An ancient tiny JS and CSS loader from the days before everyone had written one. Unmaintained.
MIT License
1.39k stars 288 forks source link

jQuery $(document).ready() called before scripts are loaded. #17

Closed Itumac closed 11 years ago

Itumac commented 11 years ago

I am testing LazyLoad as a way of delivering multiple UI framework files through two simple js includes. This way, developers don't have to include 20 or more links in their pages and I can update the files without requiring them to update their code.

The issue I am running into in my tests is that a jQuery document ready call placed at the end of a file can get called before the library files are loaded. This happens almost all the time in my test page.

Two restrictions: IE9 is the sole browser and adding the document ready call in the LazyLoad callback function is not an option. I can't control how people will design their apps.

Here is a sample of my page structure. In this example the chosen call fails as

Object doesn't support property or method 'chosen'

Please let me know if there is a workaround to this issue.

Thanks!

<!DOCTYPE html>
<html>
    <head>
        <script src="/shared/lazyload/lazyload.js"></script>
        <script src="/js/loader/1.1/scriptloader.js?v=full"></script>
   </head>
   <body>Page Content.... <select id="foo"><option>Hello</option></select>
   <script>
      $(document).ready(function(){
      $("#foo").chosen() // <--this fails
      });
   </script>
</body>
</html>

scriptloader.js Looks like this:


    cssBase = ["/shared/Bootstrap/2.3.2/noIcon/css/bootstrap.min.css"
                , "/shared/Bootstrap/2.3.2/noIcon/css/bootstrap-responsive.css"
                , "/shared/Bootstrap/overrides/2013.7/bootstrap-override.css"
                , "/shared/Fonts/FontAwesome/3.2.0/css/font-awesome.min.css"
                , "/shared/Fonts/OpenSans/OpenSans.css"
                , "/Shared/DataTables/1.9.4/media/css/DT_bootstrap.css"
                , "/shared/DataTables/1.9.4/extras/ColReorder/media/css/ColReorder.css"
                , "/shared/DataTables/1.9.4/extras/ColVis/media/css/ColVis.css"
                , "/shared/DataTables/1.9.4/extras/TableTools/media/css/TableTools.css"
                , "/shared/Chosen/0.9.15/css/chosen.css"
                , "/shared/DatePicker/2013.7/css/datepicker.css"
                , "/shared/TimePicker/2013.7/css/bootstrap-timepicker.min.css"
                , "/shared/DateRangePicker/2013.7/daterangepicker.css"
                , "/shared/Slider/2013.7/css/slider.css"
                , "/shared/css/3.0/Core.css"
              ]

    jsBase = ["/shared/jQuery/1.10.1/jquery-1.10.1.min.js"
                , "/shared/Bootstrap/2.3.2/noIcon/js/bootstrap.min.js"
                , "/shared/Bootstrap/overrides/2013.7/bootstrap-nb-extend.js"
                , "/shared/DataTables/1.9.4/media/js/jquery.dataTables.min.js"
                , "/Shared/DataTables/1.9.4/media/js/DT_bootstrap.js"
                , "/shared/DataTables/1.9.4/extras/ColReorder/media/js/ColReorder.min.js"
                , "/shared/DataTables/1.9.4/extras/ColVis/media/js/ColVis.min.js"
                , "/shared/DataTables/1.9.4/extras/FixedColumns/media/js/FixedColumns.min.js"
                , "/shared/DataTables/1.9.4/extras/FixedHeader/js/FixedHeader.min.js"
                , "/shared/DataTables/1.9.4/extras/TableTools/media/js/TableTools.min.js"
                , "/shared/DataTables/1.9.4/extras/TableTools/media/js/ZeroClipboard.js"
                , "/shared/DatePicker/2013.7/js/bootstrap-datepicker.js"
                , "/shared/TimePicker/2013.7/js/bootstrap-timepicker.min.js"
                , "/shared/Moment/2.0.0/moment.min.js"
                , "/shared/DateRangePicker/2013.7/daterangepicker.js"
                , "/shared/Chosen/0.9.15/js/chosen.jquery.min.js"
                , "/shared/BootBox/3.2.0/bootbox.min.js"
                , "/shared/Slider/2013.7/js/bootstrap-slider.js"
             ]

    LazyLoad.css(cssBase);
    LazyLoad.js(jsBase);
rgrove commented 11 years ago

Unless you have magical powers (which would be super cool), there is one reliable way to solve this: put the document ready call in the LazyLoad callback.

There are many unreliable ways to solve this, but they will all fail and they will all be a waste of time.

LazyLoad will tell you when everything has finished loading by executing its callback. If you're not willing to wait for the callback, your code may run before things finish loading, and there's nothing LazyLoad can do about it.

Itumac commented 11 years ago

That's good enough for me coming from you. I can see those paths and they are all dark forest paths. I am looking into server based bundling solutions at the moment. Or a document.write spell! :)