Question

我在一个名为scrollyteller.html的单独HTML文件中有一个Swiper：

<section class="scrollyteller">
    <div class="swiper-container">

        <div class="swiper-wrapper">
           <!-- Slides here -->
        <div>
    </div>
</section>

我在单独的文件中有这个的原因是，这个swiper有一些复杂的动画和很多资产，我不想在每次用户访问网站时加载。稍后将通过点击带有导航的链接来触发Swiper。

所以我有index.html加载script.js以及初始化swiper所需的所有函数。初始化滑块的功能称为initScrolly()。

我在index.html上还有一个按钮，用于初始化XMLHttpRequest以获取scrollyteller.html。

以下是获取html文件并将其附加到index.html的脚本：

.....click function on button:

                xhr.onreadystatechange = function () {
                    if (xhr.readyState === 4) {

                        var parsedResult = parser.parseFromString(xhr.response, "text/html"),
                            html = parsedResult.querySelector('body').innerHTML;

                        container.insertAdjacentHTML('beforeend', html);

                        container.style.display = "block";

                        initScrolly();

                    }
                };

            xhr.open('GET', url);

            xhr.send();

我在AJAX调用结束时调用了initScrolly()，但似乎没有从scrollyteller.html准备好DOM。原因Swiper计算错误的高度（如126123px ....），并且分页项目符号也未初始化。一旦我调整窗口大小，Swiper就可以正常工作了。所以它必须是DOM（？）。

这些是swiper设置：

var settings = {
    slidesPerView: 1,
    paginationClickable: false,
    mousewheelControl: true,
    simulateTouch: false,
    speed: 1000,
    effect: 'fade',
    pagination: '.swiper-pagination',
    direction: 'vertical',
    onPaginationRendered: function(){
        if (!rendered) {
            initBullets(scrollyteller);
        }
        rendered = true;
    },
    onImagesReady: function() {

        if (!loaded) {
            //remove loader only when images are loaded;

            TweenMax.to(loader, 1, {
                opacity: 0, onComplete: function () {
                    loader.style.display = "none";
                    TweenMax.to(scrollyWrapper, 2, {opacity: 1});
                }
            });
        }
        loaded = true;
    }
};

当我自己打开scrollyteller.html时，一切正常。它只是不使用AJAX。

所以问题是，在调用initScrolly()之前，如何确保DOM已准备就绪？

我试图在<script>的末尾添加一个scrollyteller.html标记但由于脚本没有自行评估，因此无法正常工作。并且在AJAX-Call中评估脚本会导致与调用函数相同的问题。

感谢任何帮助。谢谢！

AJAX调用后Swiper init是错误的

0 个答案: