Javascript JS性能问题[Skrollr Lib]

我最近一直在尝试一个名为Skrollr的js库。 我可以简单地在滚动页面时使用它来实现不同的效果，如淡出等

我遇到了一个真正的性能问题，起初，我认为这只是因为我的图像，我试图将所有内容压缩到180mb~！但当你尝试滚动时，它会像地狱一样滞后

以下是我认为它发生的地方：

while (i < Images.length) {

    empty = Math.random().toString(36).substring(7);
    to = Creating(to, 0, Images[i], empty);

    i++;
}

你明白了。 如果我的图像数组的长度约为100，它可以正常工作，但仍然不平滑！阵列的原始大小约为250。 如何解决此性能问题？任何形式的解决方案都是值得赞赏的。

---

请访问此回购协议了解完整情况：

我认为问题隐藏在“压缩到180mb”这几个字中。这些数字通常不适合HTML页面的显示。我们在这里用Kb说话。浏览器引擎肯定不喜欢重新绘制180MB图像的想法。杰里米说得好，但看看杰克的这部伟大作品。和我的情况一样，他使用图像（像很多图像一样），甚至加载了两组图像。高分辨率和低分辨率res@JeremyThille我想你是对的。我回去又检查了一遍。他使用了10幅图像。我用了大概200个。现在，如果你使用photoshop的“保存为web”，我想你的问题主要是因为图像的大小。虽然你的代码根本没有优化。顺便说一下，他也用了200。

function Creating(from, config, url, name) {

let to = 0;

if (config === 0) {

    $('#slide').append('<div class="item" id="' + name + '"></div>');
    let mydiv = $("#" + name + "");

    //first create a structure for your data with jquery
    mydiv.attr('data--' + from + '-top', 'opacity: 0;');
    from += 800;
    mydiv.attr('data--' + from + '-top', 'opacity: 0;');
    from += 400;
    mydiv.attr('data--' + from + '-top', 'opacity: 1;');
    mydiv.attr('data-anchor-target', '#slide');
    mydiv.html('<img id="img" src="' + url + '"' +
        'style="width: 1000px;">');

    to = from;

return to;