{"id":1142,"date":"2012-09-12T00:17:30","date_gmt":"2012-09-12T00:17:30","guid":{"rendered":"https:\/\/theextremewebdesigns.com\/blog\/?p=1142"},"modified":"2012-09-12T00:17:30","modified_gmt":"2012-09-12T00:17:30","slug":"jquery-on-load-event-examples-for-jquery-on-load","status":"publish","type":"post","link":"https:\/\/theextremewebdesigns.com\/blog\/jquery-on-load-event-examples-for-jquery-on-load\/","title":{"rendered":"jQuery on load event Examples"},"content":{"rendered":"<p>If you are unaware of what the <strong>.load() event<\/strong>\u00a0does, then this article is for your rescue. Read on to find out more about <em><strong>jQuery on load event<\/strong><\/em>\u00a0. Different examples are provided that will help in better understanding.<\/p>\n<p><!--more--><\/p>\n<h2>How to use on load event in jQuery<\/h2>\n<ul>\n<li>First of all, the load here is a JavaScript event.<\/li>\n<li>This load event is sent to an element when it has completely loaded, along with all it&#8217;s sub-elements.<\/li>\n<li>\u00a0This load event can be sent to any element associated with a URL such as the\u00a0window object, any scripts (like JavaScript, jQuery, etc.), images, frames and iframes.<\/li>\n<\/ul>\n<h2>Examples for jquery on load:<\/h2>\n<div class=\"make_demo\">\r\n\r\n\t<form action=\"https:\/\/theextremewebdesigns.com\/blog\/wp-content\/themes\/ewd_blog_2017\/try_demo.php?post_id=1142\" method=\"post\" name=\"form1\" target=\"_blank\" id=\"form1\">\r\n\r\n\r\n\t<input type=\"hidden\" name=\"shortcode_content\" id=\"shortcode_content\" value=\"\" \/>\r\n\r\n        <div class=\"try_demo_btn_container\">\r\n\r\n\r\n            <button type=\"submit\" name=\"sbt_make_demo\" id=\"sbt_make_demo\" class=\"btn-primary btn-try-demo\">\r\n                Try Demo\r\n            <\/button>\r\n\r\n\r\n        <\/div><!-- .try_demo_btn_container -->\r\n\r\n    <\/form>\r\n    <\/div>\r\n    \n<p>So lets say that you want to fire off an action and display a greeting message when the page completely l0ads,\u00a0including\u00a0any css, images, javascript files, etc. In such a case you may want to use the following code:<\/p>\n<p><strong>Example 1:<\/strong> Show a greeting alert when the page\u00a0has completely loaded<\/p>\n<pre class=\"lang:js decode:true\">$(window).load(function () {\nalert('Hi there, stranger!');\n});<\/pre>\n<p>From the above code, we can see that it is really very simple to use the on load event in jQuery. The JavaSript equivalent of the above code would be:<\/p>\n<pre class=\"lang:js decode:true\">window.onload = function() {\n\/\/ trigger some action here\n}<\/pre>\n<p><strong>Example 2:<\/strong>\u00a0Show a greeting alert when an image with ID &#8220;#my_image&#8221; has completely loaded<\/p>\n<pre class=\"lang:js decode:true\">$('#my_image').load(function() {\nalert('Image has completely loaded!');\n});<\/pre>\n<p><strong>Example 3:<\/strong> Show iframe ID &amp; width when it is completely loaded. Full source code follows:<\/p>\n<pre class=\"lang:xhtml decode:true crayon-selected\">&lt;html&gt;\n&lt;head&gt;\n&lt;title&gt;jQuery on load() event examples&lt;\/title&gt;\n&lt;script type=\"text\/javascript\" src=\"js\/jquery-1.8.2.min.js\"&gt;&lt;\/script&gt;\n&lt;\/head&gt;\n\n&lt;body&gt;\n&lt;iframe id=\"my_iframe\" src=\"http:\/\/www.w3schools.com\/css\/default.asp\" scrolling=\"no\" width=\"500\" height=\"500\"&gt;&lt;\/iframe&gt;\n\n&lt;script type=\"text\/javascript\"&gt;\n\n$('iframe').load(function() {\nalert( 'Iframe ID: ' + $(this).attr(\"id\") + '; ' + 'Iframe Width: ' +$(this).attr(\"width\") );\n});\n\n&lt;\/script&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;<\/pre>\n<div class=\"make_demo\">\r\n\r\n\t<form action=\"https:\/\/theextremewebdesigns.com\/blog\/wp-content\/themes\/ewd_blog_2017\/try_demo.php?post_id=1142\" method=\"post\" name=\"form1\" target=\"_blank\" id=\"form1\">\r\n\r\n\r\n\t<input type=\"hidden\" name=\"shortcode_content\" id=\"shortcode_content\" value=\"\" \/>\r\n\r\n        <div class=\"try_demo_btn_container\">\r\n\r\n\r\n            <button type=\"submit\" name=\"sbt_make_demo\" id=\"sbt_make_demo\" class=\"btn-primary btn-try-demo\">\r\n                Try Demo\r\n            <\/button>\r\n\r\n\r\n        <\/div><!-- .try_demo_btn_container -->\r\n\r\n    <\/form>\r\n    <\/div>\r\n    \n<p>When you execute the above code, the Iframe ID &amp; width are alerted.<\/p>\n<p><strong>Caveat while using Iframe<\/strong>:<\/p>\n<p>It&#8217;s mandatory for the iframe to load some valid content in order to fire off the onload event. Or else, the on load event won&#8217;t fire off.<\/p>\n<p>For example, if you replace the HTML code in the above example with the following HTML code, then the jQuery on load event won&#8217;t fire off for the Iframe.<\/p>\n<pre class=\"lang:xhtml decode:true\">&lt;iframe id=\"my_iframe\" scrolling=\"no\" width=\"500\" height=\"500\"&gt;&lt;\/iframe&gt;<\/pre>\n<p><strong>Caveat while using jQuery on load event, in general:<\/strong><\/p>\n<p>For any element that you attach the <strong>on load event to, using jQuery<\/strong>, it&#8217;s mandatory for the element to be completely loaded in order for the event to fire off. So if you have attached the on load event for an image, but the image has not completed loaded or loaded partially, then the on load event won&#8217;t be triggered.<\/p>\n<p>Hope this article helped you in understanding more about the <strong>jQuery on load event<\/strong>.<\/p>\n<h5>Your Turn!<\/h5>\n<p>Do you know of any other uses for <em><strong>on load event in jQuery<\/strong><\/em>? Feel free to share by commenting below.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>If you are unaware of what the .load() event\u00a0does, then this article is for your rescue. Read on to find out more about jQuery on load event\u00a0. Different examples are provided that will help in better understanding.<\/p>\n","protected":false},"author":1,"featured_media":395,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[20,13],"tags":[40,120,41],"class_list":["post-1142","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-jquery-tips-and-tricks","category-tips-and-tricks","tag-jquery-2","tag-jquery-onload","tag-jquery-tips"],"jetpack_featured_media_url":"","jetpack_shortlink":"https:\/\/wp.me\/paBnQX-iq","jetpack_sharing_enabled":true,"post_mailing_queue_ids":[],"_links":{"self":[{"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/posts\/1142","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/comments?post=1142"}],"version-history":[{"count":0,"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/posts\/1142\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/"}],"wp:attachment":[{"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/media?parent=1142"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/categories?post=1142"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/tags?post=1142"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}