{"id":7240,"date":"2024-11-09T19:15:08","date_gmt":"2024-11-09T19:15:08","guid":{"rendered":"https:\/\/impulsebyte.com\/blogs\/?p=7240"},"modified":"2024-11-09T19:20:19","modified_gmt":"2024-11-09T19:20:19","slug":"asynchronous-loading-of-third-party-scripts-with-barrel-asyncload","status":"publish","type":"post","link":"https:\/\/impulsebyte.com\/blogs\/shopify\/asynchronous-loading-of-third-party-scripts-with-barrel-asyncload\/","title":{"rendered":"Asynchronous Loading of Third-Party Scripts with BARREL.asyncLoad"},"content":{"rendered":"

When building a website, performance is key. Loading too many third-party scripts can slow down your website, negatively affecting both user experience and SEO. One way to optimize your website’s performance is by loading third-party scripts asynchronously. In this post, we’ll explore how to use a custom JavaScript function called BARREL.asyncLoad<\/code> to achieve this.<\/p>\n

What is Asynchronous Loading?<\/h3>\n

Asynchronous loading means that your browser can continue loading other parts of your website while waiting for scripts to load. This prevents scripts from blocking your page’s content from rendering, which can significantly improve page speed.<\/p>\n

Introduction to BARREL.asyncLoad<\/code><\/h3>\n

The BARREL.asyncLoad<\/code> function is a custom JavaScript utility that allows you to load multiple external scripts asynchronously. This function is particularly useful if you want to include several third-party resources on your site without impacting its performance.<\/p>\n

Here’s the complete code for BARREL.asyncLoad<\/code>:<\/p>\n

\r\n\r\nwindow.BARREL = window.BARREL || {};\r\n\r\nwindow.BARREL.asyncLoad = function (urls) {\r\nfor (var i = 0; i < urls.length; i++) {\r\nvar s = document.createElement('script');\r\ns.type = 'text\/javascript';\r\ns.defer = true; \/\/ Load script after HTML parsing is complete\r\ns.src = urls[i].src; \/\/ URL of the script to load\r\n\r\n\/\/ Optional: If a callback function is provided, execute it after the script loads\r\nif (typeof urls[i].callback === 'function') {\r\ns.addEventListener('load', urls[i].callback);\r\n}\r\n\r\n\/\/ Append the script to the page\r\nvar x = document.getElementsByTagName('script')[0];\r\nx.parentNode.insertBefore(s, x);\r\n}\r\n};\r\n<\/pre>\n
How to Use BARREL.asyncLoad<\/code><\/h3>\n
You can use the BARREL.asyncLoad<\/code> function to load multiple scripts by passing an array of objects. Each object should contain the script src<\/code> URL, and optionally, a callback<\/code> function that runs after the script has loaded.<\/p>\n
Example Usage:<\/h4>\n
\r\n<script>\r\nwindow.addEventListener('scroll', function () {\r\nsetTimeout(function () {\r\nwindow.BARREL.asyncLoad([\r\n{\r\nsrc: 'https:\/\/apis.google.com\/js\/platform.js?onload=renderOptIn'\r\n},\r\n{\r\nsrc: 'https:\/\/cdn.example.com\/library.js',\r\ncallback: function () {\r\nconsole.log('Library.js loaded successfully!');\r\n}\r\n},\r\n{\r\nsrc: 'https:\/\/analytics.example.com\/tracker.js'\r\n}\r\n]);\r\n}, 1000); \/\/ Delay loading by 1 second\r\n}, { once: true });\r\n<\/script>\r\n<\/pre>\n
Explanation<\/h3>\n