Calling external jQuery functions w/o document.ready();
Kinda new to jQuery and looking for help on how to keep all m开发者_C百科y script in one external file and not have it all be nested in document.ready();. I'm hoping to be able to call certain functions from specific pages only and have the rest be handle with ready();. I'm not 100% sure what the best practice is to call a function from a page either :/ Thanks.
There is nothing wrong with having multiple document.readys
I like to add a unique ID to each page, and have the javascript check that the ID exists before executing. You can create a simple wrapper function that does the check AND waits for document.ready:
var pageReady = function (id, callback) {
$(function () {
if ($(id).length) {
callback();
}
});
};
Then, similar to document.ready, you can have:
pageReady("#home-page", function () {
// Code will only run for home page here
});
pageReady("#search-page", function () {
// Code will only run for search page here
});
Just remember to add the IDs...
<body id="home-page">
You can keep all of your scripts in a single file if you like. You can have your plain JS functions in the file and not inside the document.ready() function if you don't need to manipulate or interact with the DOM. You can then put all of your DOM manipulation and interaction JS inside of the document.ready() function. You can also put JS in a $(window).load() function to run code once all of the resource have loaded on the page including images.
Example:
$(window).load(function() {
// code that will run once all resources and the DOM are loaded into the browser
console.log("window loaded");
});
runOnScriptLoad();
function runOnScriptLoad() {
// code that will run as soon as the JS file loads
console.log("script loaded");
}
$(document).ready(function () {
// code that will run once the entire DOM is loaded into the browser
console.log("DOM ready");
});
$(window).load(function() {
// code that will run once all resources and the DOM are loaded into the browser
console.log("window loaded");
});
Example Page: => http://mikegrace.s3.amazonaws.com/forums/stack-overflow/example-dom-ready.html
Have your firebug console open when you load the page and you will see the order in which each get executed in.
You can use multiple dom readys.
One of my favourite ways to determine if I should run some code on a page is to give the body a uniquie class, and then use this...
if ($('body').hasClass('contact')) {
// Validate form, etc
}
While JavaScript provides the load event for executing code when a page is rendered, this event does not get triggered until all assets such as images have been completely received. In most cases, the script can be run as soon as the DOM hierarchy has been fully constructed. The handler passed to .ready() is guaranteed to be executed after the DOM is ready, so this is usually the best place to attach all other event handlers and run other jQuery code. When using scripts that rely on the value of CSS style properties, it's important to reference external stylesheets or embed style elements before referencing the scripts.
http://api.jquery.com/ready/
In your external file you can have $(document).ready(function () { //code here; }); Alternatively, you can have all your functions in the external file, and then just on your page have
$(document).ready(function () { myfunction(); });
加载中,请稍侯......
精彩评论