how do I change the load sequence of external javascript
Question
I have a web page that loads an external chat script, but the script loads before all my CSS and jQuery kick in, so my page looks all messed up for a few seconds. Need help figuring out how to launch my chat script once the page is done loading...I think it can be done by adding the script into my jQuery setup, but I'm not sure how to do that.
here's the code, it's self-explanatory enough not to be familiar with the actual software.
<script>
var online_text = "Chat Online Now";
var offline_text = "Chat Not Available";
var check_back = 1; // this lets the script check the operator status without being logged in
</script>
<script src="http://my.domain/chat/file.php"></script>
I think what happens is that the .php file will write my online or offline text with the necessary chat link, and that's why I have to put the script in the place where I want the chat text to display.
hope that makes sense...and hopefully the community can help me figure out how to solve the problem. thanks!
UPDATE: here's where I am so far, unfortunately the #chaticon element is empty, even if I replace the script with simple text. Using jQuery 1.4.2 by the way:
$(document).load(function() {
var online_text = 'Chat Online Now';
var offline_text = 'Chat Not Available';
var check_back = '1';
$("li#chaticon").html('<script type="text\/javascript" src="http:\/\/my.domain\/chat\/file.php"><\/script>');
});
4 answers
solution1
1 2010-08-05 12:27:59
Check out using the JQuery function $(document).ready() .
It will hold off running until your entire document is loaded and ready to go.
solution2
0 2010-08-05 12:47:56
$(document).ready() , which was previously mentioned, will only wait until the DOM is ready for manipulation (ie, the node hierarchy has been fully constructed). This will not, however, wait until any additional resources (images, style sheets, etc.) have been loaded, which sounds like what you're wanting to do.
If you need all of these additional resources to be loaded first, then use $(document).load() . This will wait until all additional resources have finished loading (and hence the page will have been fully rendered).
solution3
0 2010-08-05 12:48:54
Stephen,
As per Dave's advice of putting the $(document).ready() function on the page ie:
$(document).ready(function() {
var online_text = "Chat Online Now";
var offline_text = "Chat Not Available";
var check_back = 1;
// do any other stuff here
});
also, make sure the js files are loaded at the bottom of the page, just ahead of the closing </body> tag and the css is loaded in the <head> tag. This may or may not sort the above issue, but is recognised as 'good practice' in terms of page configuration.
jim
solution4
0 2010-08-06 20:31:54
thanks jmar777, I agree there's some re-evaluating that needs to be done here...the chat script is a mix of document.write, php/mysql and some dom-oriented stuff. Not worth toying with for hours.
So I ended up putting the code from my original post into a PHP function and returning it to a variable all the way at the top of the page, this way it would be written a little bit earlier than if it were written on the fly while my page were loading. And I made a few tiny tweaks to my CSS file so that the part of the page that was getting strange-looking while the chat script loaded wouldn't look as strange.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.