Question

jQuery代码段在页面加载时不起作用。它应该取代框架 - 布局 - 垂直＆＃39;使用＆＃39;框架 - 布局 - 横向＆＃39;和填充底部：56.25％，填充底部：100％，当屏幕宽度大于641.默认情况下，它的框架 - 布局 - 垂直和填充 - 底部：56.25％（给定下面的html）。

当我在页面加载后稍微调整屏幕大小时，它的工作正常。＆＃39;负载＆＃39;不工作。

这是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

你写错了

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

应该没有,

Answer 2

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

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

jQuery代码段无法在页面加载

2 个答案: