March 26, 200917 yr Evening All, Just a quick one... does it matter what order I place my script tags and css links @ the moment I have <title>Iconic Images Print Services</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="Description" content="."> <meta name="Keywords" content=""> <script type="text/javascript" src="scripts/jscript.js"></script> <script src='js/jquery.pack.js' type='text/javascript'></script> <script src='js/jquery.simplemodal.pack.js' type='text/javascript'></script> <script type='text/javascript'> $(document).ready(function () { $('form input[type="submit"]').click(function (e) { $('#progress-message', { close: false }).modal(); /*e.preventDefault();*/ // uncomment for testing - stops the submission! }); }); </script> <link href="style/default.css" rel="stylesheet" type="text/css"> <style type="text/css" media="screen"> #modalOverlay { height:100%; width:100%; position:fixed; left:0; top:0; z-index:3000; background-color:#000; cursor:wait; } #modalContainer { height:140px; width:160px; position:fixed; left:50%; top:25%; margin-left:-80px; z-index:1000; background- color:#fff; border:3px solid #666; } #modalContainer #progress-message { padding:10px; text-align:center; color:#666; } </style> <!--[if lt IE 7]> <style type="text/css" media="screen"> #modalContainer { position: absolute; top:exp[b]ression((document.documentElement.scrollTop || document.body.scrollTop) + Math.round(25 * (document.documentElement.offsetHeight || document.body.clientHeight) / 100) + 'px'); } #modalIframe { z-index:1000; position:absolute; width:100%; height:100%; top:0; left:0; } </style> <![endif]--> </head> <body> [/b] Edited February 4, 201016 yr by Sam G added [code] tags
March 26, 200917 yr Generally, all CSS should come first, and if possible, put js at the end before the </body> tag, this will make the page seem to load faster.
March 26, 200917 yr I agree with bocaj unless the js alters layout/styles/class names etc in which case you might want it in before the css
March 27, 200917 yr id have to disagree with putting it just before </body>. IMO javascript should as much sa possible be in the <head> so that all functions are defined before they are called
March 27, 200917 yr You generally use an dom onload call anyway, so they're not called until the end anyway, with the js at the end, you don't really even need the call anymore, as you can be sure the dom is loaded. Browsers can only parse so much at a time, and when js is involved it's one file at a time. It's better on the user end to have the site completely rendered before applying js. They may experience one, maybe two seconds without js functionality, which normally is fine. Chances are the user wouldn't call any of it into effect within that timeframe. However in the <head> tag, your just adding 1 or 2 seconds load time, which is a heck of a lot when your talking percentages, and while it's downloading js, it's not parsing the html, or applying the css. As with everything there are cases where this isn't viable, and that should be assesed by the creator on a case by case basis. But generally speaking, i think you'd be mad not to put it at the end, loading time is of big importance, and seconds count.
March 27, 200917 yr Thanks for a thorough explanation bocaj... Makes a lot of sense to me now! Will read into it further
Create an account or sign in to comment