how can write a code that if javascript files do not load reloaded again?

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:

how can i improve javasccript loader?
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

How you tried to look what is happening with the google chrome dev tool -> network monitor. It bet it is just a timeout. — Maresh
– Maresh, Commented Jul 11, 2012 at 16:43
yup, the page load is heavy, previously was 5.3MB, later i have decrease it to 3.3 MB. — Dan
– Dan, Commented Jul 14, 2012 at 7:28

Daniel Li · Accepted Answer · 2012-07-11 16:31:33Z

2

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:

Sandbox: Your version of the code which is divided nicely into modules.
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!

answered Jul 11, 2012 at 16:31

Daniel Li

15.6k6 gold badges45 silver badges60 bronze badges

Sign up to request clarification or add additional context in comments.

10 Comments

Maresh Over a year ago

Hmm isn't it better to place scripts in the header? semantically speaking

Dan Over a year ago

actually this pages are quite heavy relay on JavaScript, so i can not load it in the bottom since it will break the layout of page at first loading.

Daniel Li Over a year ago

Hi Danial, this is only the case if your page requires Javascript throughout the body. Try your best to place all the Javascript at the end of the page and you will have no problems.

Peter Pajchl Over a year ago

@Maresh Placing scripts at the end of the document has nothing to do with semantics. This is purely for better performance and consequently better user experience since script will block download of the rest of the document.

Maresh Over a year ago

Ok true we can see it that way. But here the whole navigation requires javascript, so he'd avoid loading problem, I guess.

|

Maresh · Accepted Answer · 2012-07-11 16:33:19Z

1

Well the code looks neat.

But I would place the $(document).ready() script in the <head> and group css and javascript loading together.

answered Jul 11, 2012 at 16:33

Maresh

4,7221 gold badge27 silver badges30 bronze badges

2 Comments

Dan Over a year ago

correct the code is neat , since client change the stricture of code at least three times!!

Maresh Over a year ago

Oh, are you loading every pages of the book at the same time??? Could you do it using ajax, it'd greatly decrease loading time !!

Om Shankar · Accepted Answer · 2012-07-13 17:32:10Z

Looking at the comments and guessing the problem you might be having, I think your scenario is:

You are setting a JavaScript variable in PHP, and using it. All your script is dependent on this variable, and so you need to load that in head
Things are not executing in order, due to latency.

If above is correct then I think following might work

Go ahead with JavaScript in head and have a namespace declared, like var MyBook; MyBook.chapterId = <%= echo $chapter-id %>. But then move all your other code as last script file before the ending of the body tag.
Additionally, load the $(document).ready(function() {}), and use the MyBook.chapterId there. You might use it now for an AJAX call or have a function to load the chapters, and pass this variable to that function

Collectives™ on Stack Overflow

how can write a code that if javascript files do not load reloaded again?

3 Answers 3

10 Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

10 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related