Javascript jQuery代码段在页面加载时不起作用

jQuery代码段在页面加载时不起作用。当屏幕宽度大于641时，应将“框架--布局垂直”替换为“框架--布局水平”，并将底部填充：56.25%替换为底部填充：100%。默认情况下，它的框架——垂直布局和底部填充：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>

$（窗口）。在（'load，resize'，function frame（）上{
var viewportWidth=$（窗口）.width（）；
如果（视口宽度<641）{
$（“.frame”）.removeClass（“框架--布局水平”）.addClass（“框架--布局垂直”）；
$（“.image”）.css（{'padding-bottom'：'''}）；
$（“.image”）.css（{'padding-bottom'：'56.25%}）；
}否则{
$（“.frame”）.removeClass（“框架--垂直布局”）.addClass（“框架--水平布局”）；
$（“.image”）.css（{'padding-bottom'：'''}）；
$（“.image”）.css（{'padding-bottom'：'100%}）；
}
});
15天前

编辑：当我使用自动加载分页时。my 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> 

$（函数（）{
$（'div.sandor-articles.sandor section'）。无限滚动({
是的，
navSelector:'div.appPaginatorContainer'，//分页导航的选择器
nextSelector:'div.appPaginatorContainer span.next a'，//下一个链接（到第2页）的选择器
itemSelector:'div.sandor-articles div.frame'，//您将检索的所有项目的选择器
缓冲区px:40，
是的，
columnWidth:函数（containerWidth）{
返回集装箱宽度/5；
},
装载：{
FinishedMg:“没有更多页面要加载。”，
img:'http://i.imgur.com/6RMhx.gif',
msgText:“加载更多帖子”
}
});
});

您可以使用文档就绪模式。 编辑：添加了加载页面的初始调用

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

功能框架（）{
var viewportWidth=$（窗口）.width（）；
如果（视口宽度<641）{
$（“.frame”）.removeClass（“框架--布局水平”）.addClass（“框架--布局垂直”）；
$（“.image”）.css（{'padding-bottom'：'''}）；
$（“.image”）.css（{'padding-bottom'：'56.25%}）；
}否则{
$（“.frame”）.removeClass（“框架--垂直布局”）.addClass（“框架--水平布局”）；
$（“.image”）.css（{'padding-bottom'：'''}）；
$（“.image”）.css（{'padding-bottom'：'100%}）；
}
$（文档）.ready（函数（）{
框架（）；
$（窗口）。打开（'调整大小'，框架）；
});

您可以使用文档就绪模式。 编辑：添加了加载页面的初始调用

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

功能框架（）{
var viewportWidth=$（窗口）.width（）；
如果（视口宽度<641）{
$（“.frame”）.removeClass（“框架--布局水平”）.addClass（“框架--布局垂直”）；
$（“.image”）.css（{'padding-bottom'：'''}）；
$（“.image”）.css（{'padding-bottom'：'56.25%}）；
}否则{
$（“.frame”）.removeClass（“框架--垂直布局”）.addClass（“框架--水平布局”）；
$（“.image”）.css（{'padding-bottom'：'''}）；
$（“.image”）.css（{'padding-bottom'：'100%}）；
}
$（文档）.ready（函数（）{
框架（）；
$（窗口）。打开（'调整大小'，框架）；
});

你写错了

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

不应该有

，

你写错了

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

---

不应该有

，

，

“加载调整大小”删除

，

事件应该是空格分隔的。你是否查看过媒体查询？你可以用一种更简单的方式实现你的目标：

“加载调整大小”

删除

，

事件应该是空格分隔的。你是否查看过媒体查询？你可以实现你的目标目标更简单：@Satpal仅仅是polite@Satpal出于礼貌，我在编辑中添加了一些额外信息。请看。我在编辑中添加了一些额外信息。请看。