Custom 'Show More/Show Less' script not loading images in most,but not all, of Squarespace's Gallery & Summary design formats. What am I missing?

Question

Looking to Fix a 'Show More / Show Less' feature to my Squarespace site.

I have a pretty good solution, however there seems to be some limitations to the code and or Squarespace, or am I completely missing something in the code in respect to Squarespace's Galleries and Summaries.

Id like to be able to get the Squarespace Gallery Grid Design format and the Summary Carousel Design format to work. How can this be done?

Here is what I've done to date:

Testing: I have tested it with text and single images and it works great. Unfortunately when I got to testing Squarespace's Galleries and Summaries, the code was only successful for summaries in the 'wall' design format and galleries in the 'carousel' & 'stacked' design format. Any other design format for both galleries and or summaries will result in the Images not pre-loading. (blank with its text and block)

Instructions: You can inject the code in the main header code injection, or the index header or individual pages or even at the base of a page, before where you want the page to show/hide.

Exceptions: When placing at the base of a page in an index of multiple pages, where you want the function to occur more than once, its best to just inject the code in the Index's advanced settings, instead. Multiple injections on a page or index doesn't work. So just have it done once. Hope that makes sense!

Additionally: The function will require a button of course. Using squarespace's button, add at the top of where you want the Show More / Hide More location to start. The "Text" area should read: 'Show More' and the "Click Through URL" should read '#expand-(number of blocks here)' (example: #expand-3 This will collapse the next three blocks.)

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<script>
  /* This script is a custom script to control the 'show' / 'hide' extra feature.  
  To use: give each button you want to make an expander an href of "expand-3", if you want it to expand / collapse the next 3 blocks.

  Make sure to make each button say 'Show More' as its default text.
  */

  var SHOW_MORE = 'Show More'
  var COLLAPSE = 'Show Less'
  $(window).load(function(){
    // prepares all buttons by wrapping the correct # of following divs into a div with class 'extra_gallery'
    $('a[href^="#expand"]').each(function(){
      // parse # of sibling elements to wrap from href attribute and then wrap them.
      var n = parseInt($(this).attr('href').split('-')[1]);
      var next_n_divs = $(this).parents('div.sqs-block').nextAll().slice(0,n)
      // this is the line that is different.  we use display:none; on the DOM element that wraps the additional gallery.
      next_n_divs.wrapAll('<div class="extra-gallery" style="display:none;"></div>');
/*      // preload_images
      next_n_divs.find('img').each(function(){
        image = new Image();
        image.src = $(this).attr('data-src')+'?format=500w';
        console.log($(this).attr('data-src'));
      });
      // control for click behavior
      */
      $(this).click(function(){
        var target_gallery = $(this).parents('div.sqs-block').next('div.extra-gallery')
        if (target_gallery.is(':visible')){
          $(this).text(SHOW_MORE);
        }
        else {
          $(this).text(COLLAPSE);
        }
        target_gallery.slideToggle();
        return false;
      });
    });
  });
</script>

Special Thanks & Coding by: Jim Li