Load script after the rest of the page without deferring it?

Question

I have an image scroller that is blocking resources from loading until it has loaded. I have tried deferring the script but it then doesnt want to work when its deferred. What would be the simplest method for getting it to load after the rest of the page? Ive looked at some jquery methods but its like reading chinese to me

Answer 1

Here are some various options:

1. Place the <script> tag right before the </body> tag. This will allow the rest of the DOM to load before your script even starts to load.

2. Construct some code to dynamically load the script and don't run that code until either $(document).ready() fires or perhaps even $(window).load() fires depending upon how many resources you want to wait for before starting your script. You can dynamically load the script in jQuery with $.getScript() or it's fairly simple to just dynamically insert a script tag too.

3. Troubleshoot your code to figure out why the defer attribute doesn't work because it's designed for situations like yours where you want other things to load first. My guess this was because you added defer loading for the library, but didn't delay your own code that attempts to use the library thus that code didn't work when you deferred the loading of the library.

Some references on script loading:

load and execute order of scripts

Script Tag - async & defer

improving website performance by dynamically loading javascript?

pure JavaScript equivalent to jQuery's $.ready() how to call a function when the page/dom is ready for it

---

In looking at your actual page code, a reason why your script wouldn't work when you add defer to it is that you have code that depends on that script that can't be run until after the dynamic scroll code has been loaded. In looking at your code, I see this block of code and one other block similar to it:

        <script type="text/javascript">

if ( DYN_WEB.Scroll_Div.isSupported() ) {

    DYN_WEB.Event.domReady( function() {

        // arguments: id of scroll area div, id of content div
        var wndo = new DYN_WEB.Scroll_Div('wn', 'lyr1');
        // see info online at http://www.dyn-web.com/code/scrollers/continuous/documentation.php
        wndo.makeSmoothAuto( {axis:'h', bRepeat:true, repeatId:'rpt1', speed:100, bPauseResume:true} );

        var wndo2 = new DYN_WEB.Scroll_Div('wn2', 'lyr2');
        wndo2.makeSmoothAuto( {axis:'h', bRepeat:true, repeatId:'rpt2', speed:60, bPauseResume:true} );

    });
}

        </script>

Both of these have to be run AFTER the scroll library is loaded. So, if you delay the loading of the scroll library, then this code has to be run after the library is loaded.

If you're moving the scroll library to right before </body>, then place these blocks of code right after it (without using the defer tag on any).

Answer 2

Try this:

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
$(window).bind("load", function() {
   // code here
});
</script>

or this:

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
$(window).bind("load", function() {
   if ( DYN_WEB.Scroll_Div.isSupported() ) {

DYN_WEB.Event.domReady( function() {

    // arguments: id of scroll area div, id of content div
    var wndo = new DYN_WEB.Scroll_Div('wn', 'lyr1');
    // see info online at http://www.dyn-web.com/code/scrollers/continuous/documentation.php
    wndo.makeSmoothAuto( {axis:'h', bRepeat:true, repeatId:'rpt1', speed:100, bPauseResume:true} );

    var wndo2 = new DYN_WEB.Scroll_Div('wn2', 'lyr2');
    wndo2.makeSmoothAuto( {axis:'h', bRepeat:true, repeatId:'rpt2', speed:60, bPauseResume:true} );

});
}
});
</script>