Question

我正试图淡出我的照片以换取照片库。所有这些都是在JavaScript中完成的，它只是改变了图像元素的不透明度CSS值。这在一些计算机上实际上是滞后的（慢） - 例如我的笔记本电脑并不是非常强大，但它是全新的（华硕Eeepc）。

我想知道无论如何我都能解决这个性能问题。我已经看到Canvas动画和HTML5应用于图像的演示，它们在我的笔记本电脑上非常流畅。我想知道我是否可以将同样的东西应用到我的图像淡入功能。

有什么想法吗？我该怎么做？

Answer 1

我很快就使用canvas代码按照要求逐渐消失了一个图像示例：http://jsfiddle.net/6wmrd/12/（仅在Chrome和Firefox中测试过）

我不确定是否有任何性能提升，但这里至少是一个非常简单的例子，说明如何做到这一点。还应该注意的是，这是在5分钟内完成的，因此可以改进和优化代码。

否则，根据我的经验，如果你在图像后面有一个坚实的背景，我发现有时使图像上的元素褪色与背景颜色相同。

您可以提高性能的其他方法可能是降低FPS。如果我没弄错的话MooTools标配50 FPS。但是，降低FPS可能会影响感知性能。

Answer 2

以下代码适用于所有浏览器：加头：

/*  ****************************
    * updated for all browsers by 
    * Evan Neumann of Orbiting Eden on 
    * October 6, 2011.      
    * www.orbitingeden.com - evan@orbitingeden.com
    * original version only worked for IE
    *****************************/
<!-- Begin
    /*  *****************************
     *  * editable by user
     *  ***************************/
    var slideShowSpeed      = 5000; // Set slideShowSpeed (milliseconds)        shared by IE and other borwsers
    var crossFadeDuration   = 5;    // Duration of crossfade (1/10 second)      shared by IE and other borwsers
    var crossFadeIncrement  = .05;  //crossfade step amount (1 is opaque)   for non-IE browsers

    // Specify the image files
var Pic = new Array();      // do not change this line
// to add more images, just continue the pattern, adding to the array below
Pic[0] = 'images/dare2wear-427ED-e.jpg';        
Pic[1] = 'images/PBW_3238EDSM-e.jpg';           
Pic[2] = 'images/dare2wear-441_2ED-e.jpg';      

/*  ********************************
    * do not change anything below this line
    **********************************/
var f = 0;          //index of the foreground picture
var b = 1;          //index of the background picture
var p = Pic.length; //number of pictures loaded and in queue - this may increase as time goes on depending on number and size of pictures and network speed

//load the picture url's into an image object array
//used to control download of images and for IE shortcut
var preLoad = new Array();
for (i = 0; i < p; i++) { 
    preLoad[i] = new Image();
    preLoad[i].src = Pic[i];
}

function runSlideShow() {//this is trigerred by <body onload="runSlideShow()" > 
    //if IE, use alternate method
    if (document.all) {
        document.images.SlideShow.style.filter="blendTrans(duration=2)";
        document.images.SlideShow.style.filter="blendTrans(duration=crossFadeDuration)";
        document.images.SlideShow.filters.blendTrans.Apply();
    }

    //increment the foreground image source
    document.images.SlideShow.src = preLoad[f].src;

    //if IE, use the shortcut
    if(document.all) {
        document.images.SlideShow.filters.blendTrans.Play();
    }
    //all other browser use opacity cycling
    else    {
        var imageContainer  = document.getElementById('imageContainer');
        var image           = document.images.SlideShow;
        //convert an integer to a textual number for stylesheets
        imageContainer.style.background = "url('"+Pic[b]+"')";
        //set opacity to fully opaque (not transparent)
        image.style.opacity = 1;
        //run fade out function to expose background image
        fadeOut();
    }

    //increment picture index
    f++;
    //if you have reached the last picture, start agin at 0
    if (f > (p - 1)) f = 0;
    //set the background image index (b) to one advanced from foreground image
    b = f+1;
    //if b is greater than the number of pictures, reset to zero
    if(b >= p)  {b = 0;}

    //recursively call this function again ad infinitum
    setTimeout('runSlideShow()', slideShowSpeed);
}

function fadeOut(){
    //convert to element
    var el = document.images.SlideShow;

    //decrement opacity by 1/20th or 5%
    el.style.opacity = el.style.opacity - crossFadeIncrement;
    //if we have gone below 5%, escape out to the next picture
    if(el.style.opacity <= crossFadeIncrement)  {
        return; 
    }
    //wait 50 milliseconds then continue on to decrement another 5%
    setTimeout('fadeOut()', crossFadeDuration*10);
}
//  End -->

并向正文添加两个元素。第一个是容器背景元素。我使用了div，但是td，body和其他人也应该工作。第二个是前景图像。最后，在<body>标记内添加onload函数调用

  <body onLoad="runSlideShow()">
      <!-- this is the main image background -->
      <div id="imageContainer">
        <!-- this is the main image foreground -->
        <img id="SlideShow" name='SlideShow' width="324" height="486">
      </div>

Answer 3

Luca提高速度的一种方法是使用硬件加速和webkit转换。问题是不同的浏览器在不同程度上支持这一点。参见

http://mir.aculo.us/2010/06/04/making-an-ipad-html5-app-making-it-really-fast/

希望在不太遥远的未来支持中，浏览器中的硬件加速会更好。

Answer 4

性能主要与javascript代码效率有关。你在使用任何框架（jQuery，Mootools）吗？

顺便说一句，新的CSS3 transition适当性将成为这些场景的方法。

在撰写本文时，它受到Gecko 2（Firefox 4），webkit（Safari和Chrome）以及Opera的支持。

由于CSS转换规范仍处于草稿形式，因此与它们关联的所有属性都必须具有自己的特定供应商前缀：

#example  {
   opacity: 0;

   -o-transition: opacity .3s linear;
   -moz-transition: opacity .3s linear;
   -webkit-transition: opacity .3s linear;
   transition: opacity .3s linear;
}

#example:hover {
   opacity: 1;
}

不支持的浏览器怎么样？一个漂亮的解决方案可能是针对他们（主要是Firefox＆lt; 4和IE）并向他们发送一些专用的Javascript代码。对于小小的休息，总会有优雅的退化原则。

Answer 5

看一下这个site的首页。它是旋转淡入淡出的5个图像，纯css2，html4，javascript，并且是跨浏览器（据我所知）。 javascript有点陈词滥调 - 前一段时间写的:)但它看起来很顺利。了解它在您的机器上的样子。如果它滞后，您可以尝试使用较慢的更新，例如150或200ms而不是100。

CSS不透明性能。图像褪色

5 个答案: