Some of these services already (smartly) provide their scripts in an async fashion, this just combines them into more efficient, organized, and understandable code. <\/p>\n
(function(doc, script) {\r\n var js, \r\n fjs = doc.getElementsByTagName(script)[0],\r\n frag = doc.createDocumentFragment(),\r\n add = function(url, id) {\r\n if (doc.getElementById(id)) {return;}\r\n js = doc.createElement(script);\r\n js.src = url;\r\n id && (js.id = id);\r\n frag.appendChild( js );\r\n };\r\n \r\n \/\/ Google+ button\r\n add('https:\/\/apis.google.com\/js\/plusone.js');\r\n \/\/ Facebook SDK\r\n add('\/\/connect.facebook.net\/en_US\/all.js#xfbml=1&appId=200103733347528', 'facebook-jssdk');\r\n \/\/ Twitter SDK\r\n add('\/\/platform.twitter.com\/widgets.js');\r\n\r\n fjs.parentNode.insertBefore(frag, fjs);\r\n}(document, 'script'));<\/code><\/pre>\nI found it going through some site code and I forget exactly who originally did it but it seems like a Nicolas Gallagher or Mathias Bynes kind of thing. Correct me if I’m wrong.<\/p>\n
You’ll need the HTML in place for the scripts to put their stuff:<\/p>\n
<a href=\"https:\/\/twitter.com\/share\" class=\"twitter-share-button\" data-count=\"horizontal\">Tweet<\/a>\r\n\r\n<div class=\"g-plusone\" data-size=\"medium\" data-count=\"true\"><\/div>\r\n\r\n<div id=\"fb-root\"><\/div>\r\n<div class=\"fb-like\" data-send=\"false\" data-layout=\"button_count\" data-width=\"1\" data-show-faces=\"false\" data-action=\"recommend\"><\/div><\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"Some of these services already (smartly) provide their scripts in an async fashion, this just combines them into more efficient, organized, and understandable code. (function(doc, script) { var js, fjs = doc.getElementsByTagName(script)[0], frag = doc.createDocumentFragment(), add = function(url, id) { if (doc.getElementById(id)) {return;} js = doc.createElement(script); js.src = url; id && (js.id = id); frag.appendChild( […]<\/p>\n","protected":false},"author":3,"featured_media":0,"parent":3357,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"page-snippet.php","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":""},"tags":[],"acf":[],"jetpack-related-posts":[{"id":15825,"url":"https:\/\/css-tricks.com\/snippets\/javascript\/async-script-loader-with-callback\/","url_meta":{"origin":17521,"position":0},"title":"Async Script Loader with Callback","date":"January 3, 2012","format":false,"excerpt":"var Loader = function () { } Loader.prototype = { require: function (scripts, callback) { this.loadCount = 0; this.totalRequired = scripts.length; this.callback = callback; for (var i = 0; i < scripts.length; i++) { this.writeScript(scripts[i]); } }, loaded: function (evt) { this.loadCount++; if (this.loadCount == this.totalRequired && typeof this.callback ==\u2026","rel":"","context":"With 15 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":14598,"url":"https:\/\/css-tricks.com\/gallery-submission\/","url_meta":{"origin":17521,"position":1},"title":"Submit to the Gallery","date":"October 15, 2011","format":false,"excerpt":"Fill out my online form.","rel":"","context":"Similar post","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":3724,"url":"https:\/\/css-tricks.com\/snippets\/javascript\/css-for-when-javascript-is-enabled\/","url_meta":{"origin":17521,"position":2},"title":"CSS for when JavaScript is Enabled","date":"September 4, 2009","format":false,"excerpt":"document.documentElement.className = \"js\" This adds a class to the root , so you could (for example) do something like hide a
only when JavaScript is enabled. .js div#id { display: none; }","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":6284,"url":"https:\/\/css-tricks.com\/snippets\/jquery\/fallback-for-cdn-hosted-jquery\/","url_meta":{"origin":17521,"position":3},"title":"Fallback for CDN hosted jQuery","date":"April 30, 2010","format":false,"excerpt":"Several big companies offer copies of jQuery hosted on their CDN's (Content Delivery Network). Most notoriously Google, but also Microsoft and jQuery themselves. A lot of people swear by this since it saves bandwidth, downloads faster, and perhaps even stays cached jumping between different sites that use the same script.\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":280720,"url":"https:\/\/css-tricks.com\/video-screencasts\/168-css-in-js\/","url_meta":{"origin":17521,"position":4},"title":"#168: CSS-in-JS","date":"January 9, 2019","format":false,"excerpt":"I'm joined by Dustin Schau in this video and he is going to take me on a tour of the world of what has come to be known as CSS-in-JS. That is, doing your styling entirely in JavaScript, rather than in .css files that you up in the head all\u2026","rel":"","context":"In \"css-in-js\"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/01\/css-in-js.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":3309,"url":"https:\/\/css-tricks.com\/snippets\/wordpress\/remove-specific-categories-from-the-loop\/","url_meta":{"origin":17521,"position":5},"title":"Remove Specific Categories From The Loop","date":"August 10, 2009","format":false,"excerpt":" <\/h3>
<\/p> The area inside the while loop could be anything, that's just some example typical inside-loop code. The trick is the first line, and the\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/17521"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=17521"}],"version-history":[{"count":3,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/17521\/revisions"}],"predecessor-version":[{"id":17524,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/17521\/revisions\/17524"}],"up":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/3357"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=17521"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=17521"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}