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

我遇到了背景淡化脚本的问题。 该function导致高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.max) { this.num = this.min; } if(swapFirst) { $('.background.img1').css('background-image', 'url(\'http://sofzh.miximages.com/javascript/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://sofzh.miximages.com/javascript/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:

 

有没有机会优化此代码? 或者也许我可以用具有相同效果的类似东西替换它?

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

您可以尝试使用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) } 
  

那么,一种不同的方法可能是使用canvas。 这有点复杂,但在概念上反映了您的初始尝试。 我们将加载一组图像,然后通过调用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://sofzh.miximages.com/javascript/image-1.jpg", "http://sofzh.miximages.com/javascript/image-2.jpg", "http://sofzh.miximages.com/javascript/image-3.jpg", "http://sofzh.miximages.com/javascript/image-4.jpg", "http://sofzh.miximages.com/javascript/image-5.jpg", "http://sofzh.miximages.com/javascript/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);