jQuery code snippet not working on page load

Question

A jQuery code snippet isn't working upon page load. It should replace 'frame--layout-vertical' with 'frame--layout-horizontal' and padding-bottom: 56.25% with padding-bottom: 100% when the screen width is greater than 641. By default, its frame--layout-vertical and padding-bottom: 56.25% (given the html below).

Its working perfectly when I resize the screen a bit after page-load. 'load' isn't working.

Here is the jQuery:

<script type="text/javascript">


        $(window).on('load, resize', function frame() {
            var viewportWidth = $(window).width();
            if (viewportWidth < 641) {
                $(".frame").removeClass("frame--layout-horizontal").addClass("frame--layout-vertical");
                $(".image").css({'padding-bottom' : ''});
                $(".image").css({'padding-bottom' : '56.25%'});
            } else {
                $(".frame").removeClass("frame--layout-vertical").addClass("frame--layout-horizontal");
                $(".image").css({'padding-bottom' : ''});
                $(".image").css({'padding-bottom': '100%'}); 
            }
        });



</script>


<div class="frame frame--policy frame--layout-vertical">
    <div class="frame__hover-area">
        <div class="frame__main-content">
            <div class="frame__image-wrapper">
                <div class="image image--placeholder frame__image wow fadeIn animated" data-wow-duration="1s" data-wow-delay="0s" style="padding-bottom: 56.25%; visibility: visible; animation-duration: 1s; animation-delay: 0s; animation-name: fadeIn;">
                    <img class="image__inner" src="http://redspark/upload/content/1/2017/03/11-58bd7aaf35385_thumbnail.jpg" role="presentation">
                    </div>
                </div>
                <div class="frame__content">
                    <span>
                        <a class="section-button section-button--policy" href="/content/blog/category/9/" typeof="skos:Concept" property="rdfs:label skos:prefLabel" datatype="">Sex</a>
                        <a class="article-component__link" href="http://redspark/content/blog/9/279-7-vegetarian-recipes-that-are-better-in-a-bowl.html">
                            <h2 class="headline headline--article">7 Vegetarian Recipes That Are Better in a Bowl</h2>
                        </a>
                        <div class="byline">
                            <a class="author-link" href="">author</a>
                            <time class="byline__date" datetime="2017-03-11T04:31:06.000Z" title="2017-03-11 04:31">15 days ago</time>
                        </div>
                    </span>
                </div>
                <a href="http://redspark/content/blog/9/279-7-vegetarian-recipes-that-are-better-in-a-bowl.html" class="frame__main-content__cover-link"></a>
            </div>
            <div class="frame__border"></div>
            <div class="frame__border frame__border--hover"></div>
        </div>
    </div>

EDIT: When I am using a auto load pagination. The my jQuery code isn't working since the browser isn't loaded. Can you please give me a suggestion? How can I call jQuery code with auto pagination?

Here is the autoloading snippet.

<script language="Javascript" type="text/javascript">

    $(function () {

        $('div.sponsor-articles.sponsor-section').infinitescroll({
            debug: true,
            navSelector: 'div.appPaginatorContainer', // selector for the paged navigation
            nextSelector: 'div.appPaginatorContainer span.next a', // selector for the NEXT link (to page 2)
            itemSelector: 'div.sponsor-articles div.frame', // selector for all items you'll retrieve
            bufferPx: 40,
            debug:true,
                    columnWidth: function (containerWidth) {
                        return containerWidth / 5;
                    },
            loading: {
                finishedMsg: 'No more pages to load.',
                img: 'http://i.imgur.com/6RMhx.gif',
                msgText: 'Loading more posts'
            }

        });


    });

</script> 

Answer 1

You write wrong

$(window).on('load resize', function frame() {})

there should be no ,

Answer 2

You can use the document ready pattern. EDIT: Added an initial call for page loaded.

function frame() {
  var viewportWidth = $(window).width();
  if (viewportWidth < 641) {
      $(".frame").removeClass("frame--layout-horizontal").addClass("frame--layout-vertical");
      $(".image").css({'padding-bottom' : ''});
      $(".image").css({'padding-bottom' : '56.25%'});
  } else {
      $(".frame").removeClass("frame--layout-vertical").addClass("frame--layout-horizontal");
      $(".image").css({'padding-bottom' : ''});
      $(".image").css({'padding-bottom': '100%'}); 
  }

$( document ).ready(function() {
  frame();
  $(window).on('resize', frame);
});