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

时间：2019-05-07 22:59:02

标签： javascript jquery css swiper idangero

我有一个使用此模板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秒 enter image description here

然后加载，但是在设计上经过了长时间的空白之后 enter image description here

1 个答案:

答案 0 :(得分：0)

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

相关问题
最新问题