javascript - jQuery 背景图片淡入淡出功能导致 Chrome 和 Opera CPU 使用率高

Question

背景褪色脚本有问题。该函数会导致 CPU 使用率过高(30-40%，在 Intel i7-4810MQ 上测试)。该问题仅出现在 Chrome 和 Opera 上。使用 Firefox 一切正常。这对我来说是个大问题，因为当我的网站打开时，笔记本电脑开始发热，风扇声音越来越大。这是 jsfiddle 代码:http://jsfiddle.net/jwdu8mkq/4/JS:

 $(document).ready(function() {
                    var background = {};
                    background.num = 3;
                    background.min = 1;
                    background.max = 6;
                    background.firstShow = true;
                    background.swap = function() {
                        var swapFirst = false;
                        var swapSecond = false;
                        if($('.background.img1').attr('image-number') == this.num) {
                            $('.background.img1').fadeOut(2000);
                            swapSecond = true;
                        } else if($('.background.img2').attr('image-number') == this.num) {
                            $('.background.img2').fadeOut(2000);

                            swapFirst = true;
                        } else {
                            swapFirst = true;
                        }

                        this.num++;

                        if(this.num < this.min) {
                            this.num = this.min;
                        } else if(this.num > this.max) {
                            this.num = this.min;
                        }

                        if(swapFirst) {
                            $('.background.img1').css('background-image', 'url(\'http://lokeshdhakar.com/projects/lightbox2/images/image-' + this.num + '.jpg\')');
                            $('.background.img1').attr('image-number', this.num);
                            $('.background.img1').fadeIn(this.firstShow ? 0 : 2000);
                            this.firstShow = false;
                        } else if(swapSecond) {
                            $('.background.img2').css('background-image', 'url(\'http://lokeshdhakar.com/projects/lightbox2/images/image-' + this.num + '.jpg\')');
                            $('.background.img2').attr('image-number', this.num);
                            $('.background.img2').fadeIn(this.firstShow ? 0 : 2000);
                            this.firstShow = false;
                        }

                    }
                    setInterval(function() { background.swap() }, 6000);
                    background.swap();
                });

CSS:

.background {
    filter: blur(10px);
    -webkit-filter: blur(10px);
    -moz-filter: blur(10px);
    -o-filter: blur(10px);
    -ms-filter: blur(10px);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    z-index: -1000;
    display: none;
}

HTML:

<div class="background img1"></div>
<div class="background img2"></div>

有机会优化这段代码吗？或者我可以用具有相同效果的类似东西替换它吗？

抱歉，如果问题很明显，我绝对不是一个好的网页设计师。

Answer 1

您可以尝试使用 CSS 过渡为您完成大部分提升。如果您定义 6 个类，每个类都有背景，那么您可以交换这些类并大大简化事情。

此策略允许您使用淡入淡出交换类而不是 div。 CSS 过渡提供的淡入淡出效果。

要获得完整效果，您需要查看一个循环以便缓存图像。为了正确实现，您需要预加载图像。

$(document).ready(function() {
    var background = {};
    background.num = 3;
    background.max = 6;
    background.container = $(".background");
    background.swap = function() {
        this.container.removeClass("background_" + this.num);
        this.num = (this.num % this.max) + 1;
        this.container.addClass("background_" + this.num);
    }

    setInterval(function() { background.swap() }, 6000);
    background.swap();
});

.background {
    height: 600px;
    width: 600px;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;

    -webkit-filter: blur(10px);
    -moz-filter: blur(10px);
    -o-filter: blur(10px);
    -ms-filter: blur(10px);
    filter: blur(10px);
	
    transition: all 0.5s ease-in-out;
}

.background_1 { background-image: url(http://lokeshdhakar.com/projects/lightbox2/images/image-1.jpg) }
.background_2 { background-image: url(http://lokeshdhakar.com/projects/lightbox2/images/image-2.jpg) }
.background_3 { background-image: url(http://lokeshdhakar.com/projects/lightbox2/images/image-3.jpg) }
.background_4 { background-image: url(http://lokeshdhakar.com/projects/lightbox2/images/image-4.jpg) }
.background_5 { background-image: url(http://lokeshdhakar.com/projects/lightbox2/images/image-5.jpg) }
.background_6 { background-image: url(http://lokeshdhakar.com/projects/lightbox2/images/image-6.jpg) }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="background background_3"></div>

这是我在 chrome 系统中看到的 CPU 使用情况。左半部分是你的代码，右半部分是我的代码。