ajax swiper 初始有问题,AJAX调用后Swiper init是错误的

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

我在单独的文件中有这个的原因是，这个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已准备就绪？

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

感谢任何帮助。谢谢！