Question

I have a page, php and javascript. Sometimes, the javascript files do not load, then my page will work properly.

I have include 5 javascript file (jQuery plug-in), i want to know:

1. how can i improve javasccript loader?
2. how can i reload the scriptfile if the script files do not loaded properly?

I have checked when the php page takes more than 10 sec to load the page will be broken.

Thank you

Answer 1

Tip #1:

Have the Javascript files load at the end of your page.

Javascript does not need to be send over HTTP so soon, as it’s use is only for dynamic changes after the page is loaded.

Move:

    <script  type="text/javascript" src='src/jquery_1.7.min.js' ></script>
    <!-- fancybox -->
    <!--<script type="text/javascript" src="src/jquery.mousewheel.js"></script>-->
    <script type="text/javascript" src="src/jquery.fancybox.js?v=2.0.6"></script>
    <script type="text/javascript" src="helpers/jquery.fancybox-buttons.js?v=1.0.2"></script>
    <script type="text/javascript" src="helpers/jquery.fancybox-thumbs.js?v=1.0.2"></script>
    <script type="text/javascript" src="helpers/jquery.fancybox-media.js?v=1.0.0"></script>
    <script type="text/javascript">
        var _gaq = _gaq || [];
        _gaq.push(['_setAccount', 'UA-16476667-10']);
        _gaq.push(['_trackPageview']);
        (function() {
            var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
            ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
            var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
        })();

        function fireWhenReady() {
            if (typeof function1 != 'undefined') {
                function1();
            }
            else {
                setTimeout(fireWhenReady, 100);
            }
        }
        $(document).ready(fireWhenReady);
    </script>

to the bottom of the page.

Tip #2:

In addition, try and maintain your Javascript code in two versions:

1. Sandbox: Your version of the code which is divided nicely into modules.
2. Release: The website’s version of the code which is placed all into one Javascript file and minified using something like YUI Compressor. This reduces the file size and increases load speed by decreasing the amount of HTTP requests accordingly.

Tip #3:

Replace:

<script type="text/javascript" src='src/jquery_1.7.min.js' ></script>

with:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

Most users today have the Google API version of jQuery cached so this loads much faster than having to load your version on hand.

Enjoy and good luck!