<!-- wp:image {"align":"center","id":125,"width":768,"height":402,"sizeSlug":"large","linkDestination":"none"} -->
<div class="wp-block-image"><figure class="aligncenter size-large is-resized"><img src="https://www.mojoin.com/wp-content/uploads/2020/12/call-js-content-loaded-1024x536.jpg" alt="call js after content loaded" class="wp-image-125" width="768" height="402"/><figcaption>call JavaScript after content loaded</figcaption></figure></div>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>when we try to customize a Shopify product, collection, or check-out page, in most cases we need to implement special features with JavaScript.  For example, show the most favorite products on the product page or on the check-out page, we need to write some JavaScript function to do some changes in your DOM object after all the pages content loaded. then we need to know how we can call JavaScipt after content loaded.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>From frontend point of view, JavaScript has an event listener called "DOMContentLoaded" which we can use to call our JavaScript function codes.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>The <a href="https://developer.mozilla.org/en-US/docs/Web/API/Window/DOMContentLoaded_event"><strong><code>DOMContentLoaded</code></strong> </a>event fires when the initial HTML document has been completely loaded and parsed, without waiting for stylesheets, images, and subframes to finish loading.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>So codes like this:</p>
<!-- /wp:paragraph -->

<!-- wp:enlighter/codeblock -->
<pre class="EnlighterJSRAW" data-enlighter-language="generic" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">document.addEventListener('DOMContentLoaded', function() {
   // your code here
},false);</pre>
<!-- /wp:enlighter/codeblock -->

<!-- wp:paragraph -->
<p>The above implementation method is based on raw JavaScript. But if a <a href="https://jquery.com/download/" title="https://jquery.com/download/">JQuery JavaScript library</a> already included in your theme, you call put your logic code in the JQuery wrapped function as below:</p>
<!-- /wp:paragraph -->

<!-- wp:enlighter/codeblock -->
<pre class="EnlighterJSRAW" data-enlighter-language="generic" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">$( document ).ready(function() {
    // put your logic code here
});</pre>
<!-- /wp:enlighter/codeblock -->