Question

早上好，

我目前正在完成一个项目：http://schaedlingsbekaempfer24.eu/

在为一个简单的自我调用fadeOut / fadeIn效果嵌入一点点javascript后，页面加载时间增加了4到5秒。

这是我的js：

$(document).ready(function() {

    pic = $(this).find('.picture a:nth-child(2n) img');
    text = $(this).find('#testimonal p:first-child').next();

    $.fn.fader = function() {

        $(pic).delay(5000).fadeOut(300);
        $(text).delay(5000).fadeOut(300);

        $(pic).delay(5000).fadeIn(300);
        $(text).delay(5000).fadeIn(300);

        $(this).fader();
    };

    setTimeout(function() {    
      $('#preview').fader();
    }, 2000);

});

似乎该功能是从网站开始加载的第一时开始执行的。我如何调整代码以获得更好的加载性能？

Answer 1

最好的解决方法是在函数内部移动设置超时，这样就可以避免递归锤击，并且每5秒只产生一次淡入淡出调用。

现在，您可以通过无休止的递归调用来强制使用浏览器。

如果在你的推子功能中放入console.log（'called'），你会感到惊讶！

你可以做一些小的改进，但与你的第一个问题相比，它们真的很小：

1-在jquery加载之后和文档就绪回调函数之前移动$ .fn.fader定义

2-缓存您的选择器，例如

var $this = $(this);
$this.delay(1000).fadeIn(300);
$this.delay(1000).fadeOut(300);

同样，与您的大优化问题相比，这是非常小的性能调整，并且本身不会提供良好的性能。

此功能是否会减慢页面加载时间？如何优化？

1 个答案: