Why my jquery code works in IE9 but not in IE8?

Question

<script>
            $(document).ready(function() {
                $("#various2").fancybox({
                    'width': 800,
                    'height': 570,
                    'type':'iframe'
                });
            });
</script>

I'm getting error in IE8 and 7 but not in IE9

Object doesn't support property or method 'fancybox'

and error is on this line

$("#various2").fancybox({

and my scripts are at bottom before </body>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js" defer="defer"></script>
        <script>!window.jQuery && document.write(unescape('%3Cscript src="js/libs/jquery-1.5.1.min.js"%3E%3C/script%3E'))</script>
        <script src="js/plugins.js" defer="defer"></script>
        <script>
        $(document).ready(function() {
            $("#various2").fancybox({
                'width': 800,
                'height': 570,
                'type':'iframe'
            });
        });
        </script>

Answer 1

You are using defer on the jQuery library, which means it is probably not getting loaded before the jQuery code itself.

Since your scripts are at the bottom of the page before </body> there is no need to defer loading them at all since the rest of the page had already loaded.

Answer 2

Inline script tags don't support defer , and so will always execute as soon as they are encountered. Because your external script has defer , it will load at some arbitrary point in the future. Thus, your inline script will (almost) always execute before your external script has downloaded and run.

Answer 3

I guess, you should debug around defer="defer" part. Different IE versions may be interpreting it different way, causing js libs to be parsed after body script gets parsed.