Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Can I force a custom script to load after other elements?


MatthewCraig

Question

Site URL: https://www.mh316.org/bible-studies/the-god-of-new-beginnings

Pass: myrtlefield

I asked a question about slow loading images, but no response. I think I figured the issue is my accordion script. It seems that when it is active, SQ loads the Markdown Accordion box before the image at the top of my page. This makes it look like the page is very slow. However, if I add 'defer async' to the Custom Code JavaScript, the Accordion function doesn't load at all!

Working code with slow image load:

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

<script>
    $(document).ready(function(){
    $('.markdown-block .sqs-block-content h1').addClass('ui-closed').css('cursor','pointer');
    $(".markdown-block .sqs-block-content h1").nextUntil("h1").slideToggle();
    $(".markdown-block .sqs-block-content h1").click(function() {
      
      $(this).nextUntil("h1").slideToggle();
      $(this).toggleClass('ui-closed ui-open');
      });
    });

Not working code with fast image load:

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" defer async></script>

<script>
    $(document).ready(function(){
    $('.markdown-block .sqs-block-content h1').addClass('ui-closed').css('cursor','pointer');
    $(".markdown-block .sqs-block-content h1").nextUntil("h1").slideToggle();
    $(".markdown-block .sqs-block-content h1").click(function() {
      
      $(this).nextUntil("h1").slideToggle();
      $(this).toggleClass('ui-closed ui-open');
      });
    });

Link to comment

2 answers to this question

Recommended Posts

  • 0
2 hours ago, MatthewCraig said:

Site URL: https://www.mh316.org/bible-studies/the-god-of-new-beginnings

Pass: myrtlefield

I asked a question about slow loading images, but no response. I think I figured the issue is my accordion script. It seems that when it is active, SQ loads the Markdown Accordion box before the image at the top of my page. This makes it look like the page is very slow. However, if I add 'defer async' to the Custom Code JavaScript, the Accordion function doesn't load at all!

Working code with slow image load:

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

<script>
    $(document).ready(function(){
    $('.markdown-block .sqs-block-content h1').addClass('ui-closed').css('cursor','pointer');
    $(".markdown-block .sqs-block-content h1").nextUntil("h1").slideToggle();
    $(".markdown-block .sqs-block-content h1").click(function() {
      
      $(this).nextUntil("h1").slideToggle();
      $(this).toggleClass('ui-closed ui-open');
      });
    });

Not working code with fast image load:

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" defer async></script>

<script>
    $(document).ready(function(){
    $('.markdown-block .sqs-block-content h1').addClass('ui-closed').css('cursor','pointer');
    $(".markdown-block .sqs-block-content h1").nextUntil("h1").slideToggle();
    $(".markdown-block .sqs-block-content h1").click(function() {
      
      $(this).nextUntil("h1").slideToggle();
      $(this).toggleClass('ui-closed ui-open');
      });
    });

You may want to place the code to footer of the code injection?

Greeting, it's BaNgan from BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Youtube Gallery for Squarespace
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
  • 0
40 minutes ago, bangank36 said:

You may want to place the code to footer of the code injection?

Hey, I've tried putting the code in all available areas: Header, Footer, Blog Header, Blog Specific and the load order happens the same each time. It always tries to load the full Markdown Accordion before it loads the image.

Any reason why the 'defer' tag would stop the script running at all?

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...