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使用情况。你左边的代码和右边的代码。

Answer 2

那么，不同的方法可能是使用画布。这有点复杂，但从概念上反映了您的初始尝试。我们将加载一组图像，然后通过调用crossfadeTo（）来循环它们。你可以做很多事情来改善这一点，但它可能会让你再次前进。作为一个例子，第一个交叉淡化到自身的图像有点不稳定。

    function loadImages(imageURLs, images) {
        imageURLs.forEach(function(item){
            var img = new Image();
            img.onload = function(){ images.push(img); };
            img.src = item;
        });
    }

    var crossfadeTo = (function(myCanvas){
        var ctx = myCanvas.getContext('2d');
        var last = myCanvas.cloneNode(true).getContext('2d');
        var next = myCanvas.cloneNode(true).getContext('2d');

        var currentImage;
        var nextImage;
        var currentAlpha = 1;

        var crossfadeTo = function(toImage){
            currentAlpha = 1;
            nextImage = toImage;

            if (!currentImage) { currentImage = nextImage; }

            crossfade();
        }

        var crossfade = function() {
            last.clearRect(0, 0, myCanvas.width, myCanvas.height);
            last.globalAlpha = currentAlpha;
            last.drawImage(currentImage, 0, 0, currentImage.width, currentImage.height, 0, 0, myCanvas.width, myCanvas.height);

            next.clearRect(0, 0, myCanvas.width, myCanvas.height);
            next.globalAlpha = 1 - currentAlpha;
            next.drawImage(nextImage, 0, 0, nextImage.width, nextImage.height, 0, 0, myCanvas.width, myCanvas.height);

            ctx.clearRect(0, 0, myCanvas.width, myCanvas.height);
            ctx.drawImage(last.canvas, 0, 0);
            ctx.drawImage(next.canvas, 0, 0);

            currentAlpha -= 0.01;

            if (currentAlpha <= 0) {
                currentImage = nextImage;
            } else {
                requestAnimationFrame(crossfade);
            }
        };

        return crossfadeTo;
    })(document.getElementById("main"), images);

    var imageURLs = [
        "http://lokeshdhakar.com/projects/lightbox2/images/image-1.jpg",
        "http://lokeshdhakar.com/projects/lightbox2/images/image-2.jpg",
        "http://lokeshdhakar.com/projects/lightbox2/images/image-3.jpg",
        "http://lokeshdhakar.com/projects/lightbox2/images/image-4.jpg",
        "http://lokeshdhakar.com/projects/lightbox2/images/image-5.jpg",
        "http://lokeshdhakar.com/projects/lightbox2/images/image-6.jpg",
    ];
    var images = [];

    loadImages(imageURLs, images);

    var currentImageIndex = 0;
    setInterval(function(){
        if (images.length === 0 ){ console.log("not enough images yet..."); return; }
        crossfadeTo(images[currentImageIndex % images.length]);
        currentImageIndex = (currentImageIndex + 1) % images.length;
    }, 6000);

<canvas id="main" width="400" height="400"></canvas>

此解决方案在FF，Chrome和Edge下几乎不使用CPU。

JQuery背景图像淡入淡出功能会导致Chrome和Opera的CPU使用率过高

2 个答案: