Question

我最近一直在尝试使用名为Skrollr的js库。我可以在滚动页面时将其用于不同的效果，例如淡出等。

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

这是我认为它发生的地方：

while (i < Images.length) {

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

    i++;
}

并且创建功能也非常直接！

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;

...... bla bla

return to;

你明白了。如果我的图像数组的长度大约是100，那它可以工作但仍然不顺畅！并且阵列的原始大小约为250。我该如何解决这个性能问题？非常感谢任何类型的解决方案。请访问此回购全文：https://github.com/codacy20/SkrollWebsite/blob/master/app.js

JS性能问题[Skrollr Lib]

0 个答案: