jQuery代碼片段在頁面加載時不起作用

Question

jQuery代碼片段在頁面加載時不起作用。當屏幕寬度大於641時，它應該將'frame-layout-vertical'替換爲'frame-layout-horizo​​ntal'和padding-bottom：56.25％，填充底部：100％。默認情況下，其框架 - layout-vertical和padding-bottom：56.25％（給出下面的html）。

當我在頁面加載後調整屏幕大小時，它的工作很完美。 '加載'不起作用。

這裏是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> 

編輯：當我使用的是自動加載分頁。由於瀏覽器未加載，我的jQuery代碼無法工作。你能給我一個建議嗎？我如何使用自動分頁調用jQuery代碼？

這是自動加載片段。

<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

您可以使用文檔就緒模式。 編輯：添加頁面加載的初始呼叫。

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); 
}); 

Answer 2

你寫錯

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

應該沒有,