javascript - swiper 插件延迟加载大约 30 到 60 秒

Question

我有一个使用此模板的网站 https://ld-wp.template-help.com/wordpress_63613/问题出在上一个链接中。新闻 div 的加载时间比所有页面内容晚 30 到 60 秒。您只需浏览链接并查看问题即可

我会附上屏幕截图

我看到该模板使用了来自 * http://www.idangero.us/swiper/ 的 swiper 插件

我试图下载原始的 css 和 js 文件，但我不工作

<div class="swiper-container">
    <!-- Additional required wrapper -->
    <div class="swiper-wrapper">
        <!-- Slides -->
        <!-- Slide-->
        <div class="swiper-slide">
            <div class="content-wrapper">
                <div class="entry-meta">
                    <div class="post-meta post-date">
                        <a href="2016/10/27/27.html" class="post__date-link"><time datetime="2016-10-27T10:21:25+00:00">October 27, 2016</time></a>
                    </div>
                    <div class="post-meta post-comments"><a href="quadrennial-dinner-breaks-numerous-records-raises-5-million.html#comments" class="post__comments-link">3 comments</a></div>
                </div>
                <header class="entry-header">
                    <div class="post-thumbnail">
                        <a href="quadrennial-dinner-breaks-numerous-records-raises-5-million.html" class="post-thumbnail__link"><img class="post-thumbnail__img" src="wp-content/uploads/2016/10/img-3-390x303.jpg" alt="Bedayia School Celebrates 100 days with their Students" width="390" height="303"></a>
                    </div>
                    <h5 class="entry-title"><a href="quadrennial-dinner-breaks-numerous-records-raises-5-million.html" title="Bedayia School Celebrates 100 days with their Students">Bedayia School Celebrates 100 days with their Students</a></h5>
                </header>
                <article class="entry-content">
                    <p>Gr 1 & 2 students during the Speak up campaign ceremony & Student Honor roll Gr 1 & 2 students during the Speak up campaign ceremony & Student Honor roll</p>
                </article>
            </div>
            <footer class="entry-footer"></footer>
        </div>
        <!-- Slide-->
        <div class="swiper-slide">
            <div class="content-wrapper">
                <div class="entry-meta">
                    <div class="post-meta post-date">
                        <a href="2016/10/19/19.html" class="post__date-link"><time datetime="2016-10-19T10:20:30+00:00">October 19, 2016</time></a>
                    </div>
                    <div class="post-meta post-comments"><a href="quadrennial-dinner-breaks-numerous-records-raises-5-million.html#respond" class="post__comments-link">0 comments</a></div>
                </div>
                <header class="entry-header">
                    <div class="post-thumbnail">
                        <a href="quadrennial-dinner-breaks-numerous-records-raises-5-million.html" class="post-thumbnail__link"><img class="post-thumbnail__img" src="wp-content/uploads/2016/10/img-6-390x303.jpg" alt="Bedaya School added 33 new photos to the album: Animal Show." width="390" height="303"></a>
                    </div>
                    <h5 class="entry-title"><a href="quadrennial-dinner-breaks-numerous-records-raises-5-million.html" title="Bedaya School added 33 new photos to the album: Animal Show.">Bedaya School added 33 new photos to the album: Animal Show.</a></h5>
                </header>
                <article class="entry-content">
                    <p>In BIS we focus on representing the new concepts by practicing real life experiences that help the students to make connections between the world and their studies .</p>
                </article>
            </div>
            <footer class="entry-footer"></footer>
        </div>
        <!-- Slide-->
        <div class="swiper-slide">
            <div class="content-wrapper">
                <div class="entry-meta">
                    <div class="post-meta post-date">
                        <a href="2016/10/03/03.html" class="post__date-link"><time datetime="2016-10-03T10:16:05+00:00">October 3, 2016</time></a>
                    </div>
                    <div class="post-meta post-comments"><a href="lus-commencement-2016.html#respond" class="post__comments-link">0 comments</a></div>
                </div>
                <header class="entry-header">
                    <div class="post-thumbnail">
                        <a href="lus-commencement-2016.html" class="post-thumbnail__link"><img class="post-thumbnail__img" src="wp-content/uploads/2016/10/img-7-390x303.jpg" alt="LU&#039;s commencement 2016" width="390" height="303"></a>
                    </div>
                    <h5 class="entry-title"><a href="lus-commencement-2016.html" title="Bedaya School's commencement 2016">Bedaya School's commencement 2016</a></h5>
                </header>
                <article class="entry-content">
                    <p>This year the commencement at the Bedayia School has been the biggest in its&hellip;</p>
                </article>
            </div>
            <footer class="entry-footer"></footer>
        </div>
        <!-- Slide-->
        <div class="swiper-slide">
            <div class="content-wrapper">
                <div class="entry-meta">
                    <div class="post-meta post-date">
                        <a href="2016/09/22/22.html" class="post__date-link"><time datetime="2016-09-22T10:13:29+00:00">September 22, 2016</time></a>
                    </div>
                    <div class="post-meta post-comments"><a href="professor-kenobi-at-the-yale-conference-2016.html#respond" class="post__comments-link">0 comments</a></div>
                </div>
                <header class="entry-header">
                    <div class="post-thumbnail">
                        <a href="professor-kenobi-at-the-yale-conference-2016.html" class="post-thumbnail__link"><img class="post-thumbnail__img" src="wp-content/uploads/2016/10/img-10-390x303.jpg" alt="Professor Kenobi at the Yale Conference 2016" width="390" height="303"></a>
                    </div>
                    <h5 class="entry-title"><a href="professor-kenobi-at-the-yale-conference-2016.html" title="Professor Kenobi at the Yale Conference 2016">Professor Kenobi at the Yale Conference 2016</a></h5>
                </header>
                <article class="entry-content">
                    <p>This spring the Bedaya School&#8217;s professor and the SPS business school dean Michelle Kenobi visited&hellip;</p>
                </article>
            </div>
            <footer class="entry-footer"></footer>
        </div>
        <!-- Slide-->
        <div class="swiper-slide">
            <div class="content-wrapper">
                <div class="entry-meta">
                    <div class="post-meta post-date">
                        <a href="2016/09/15/15.html" class="post__date-link"><time datetime="2016-09-15T10:11:21+00:00">September 15, 2016</time></a>
                    </div>
                    <div class="post-meta post-comments"><a href="law-school-expansion.html#respond" class="post__comments-link">0 comments</a></div>
                </div>
                <header class="entry-header">
                    <div class="post-thumbnail">
                        <a href="law-school-expansion.html" class="post-thumbnail__link"><img class="post-thumbnail__img" src="wp-content/uploads/2016/10/img-9-390x303.jpg" alt="Law school expansion" width="390" height="303"></a>
                    </div>
                    <h5 class="entry-title"><a href="law-school-expansion.html" title="Law school expansion">Law school expansion</a></h5>
                </header>
                <article class="entry-content">
                    <p>As the submission process for this year has already wrapped up, we can see&hellip;</p>
                </article>
            </div>
            <footer class="entry-footer"></footer>
        </div>
    </div>
    <!-- If we need pagination -->
    <div class="swiper-pagination"></div>
    <!-- If we need navigation buttons -->
    <div class="swiper-button-prev"><i class="linearicon linearicon-chevron-left"></i></div>
    <div class="swiper-button-next"><i class="linearicon linearicon-chevron-right"></i></div>
</div>

第一次加载时会变成这样，持续 30 到 60 秒，具体取决于网络速度

然后它加载，但在设计上有很长一段时间的空白之后

Answer 1

属性之间没有空格。JavaScript 在初始页面加载期间被解析。延迟解析 JavaScript 以减少页面呈现的阻塞。