MatthewCraig Posted April 29, 2021 Share Posted April 29, 2021 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'); }); }); Beyondspace 1 Link to comment
Beyondspace Posted April 29, 2021 Share Posted April 29, 2021 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? BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox) 🗓️ Delivery Date Picker (Squarespace Date format) 💫 Animated Buttons (Referral URL) 🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations) 🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates) If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you! Link to comment
MatthewCraig Posted April 29, 2021 Author Share Posted April 29, 2021 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
Amaya_SQSP Posted February 11, 2022 Share Posted February 11, 2022 Hi @MatthewCraig I see that you used some custom code to create an accordion on your site and it has been causing some issues. I'm happy to say it is now possible to add an accordion to your site without additional code using the accordion block! We have some information about the possibilities and customizations of the Accordion Block in our guide "Accordion blocks" should you want to take a look. Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment