0

早上好，

我目前正在完成一个项目：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);

});

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

4

1 回答 1

1

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

现在你正在杀死你的浏览器，迫使它进行无休止的递归调用。

如果在你的推子函数里放一个 console.log('call') 你会惊讶的！

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

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

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

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

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

于 2012-04-23T07:58:27.090 回答