フォトギャラリーを切り替えるためにイメージをフェードインしようとしています。 JavaScriptで行われているのはイメージ要素の不透明度CSS値を変更するだけです。一部のコンピュータでは、これは実際には遅いです（例えば、私のラップトップは非常に強力ではありませんが、新しいものです（Asus Eeepc））。CSSの不透明度のパフォーマンス。イメージフェーディング
とにかくこのパフォーマンスの問題を解決できるかどうか疑問に思っていました。キャンバスアニメーションとHTML5のデモが画像に適用されていて、ノートパソコンで滑らかになっています。イメージフェーディング機能に同じことを適用できるかどうかは疑問です。
アイデア？どうすればいい？
：http://jsfiddle.net/6wmrd/12/（のみChromeとFirefoxでテストした）
- 私ではない任意のパフォーマンスの向上がが存在する場合に確認してください、しかし、ここでどのように行うことができるかの非常に簡単な例です。これは5分で完了したので、コードを改善して最適化できることにも注意してください。
私の経験から、画像の背景が堅実な場合は、背景と同じ色で画像上に要素を消すことが時々スムーズになることがわかりました。
パフォーマンスを改善できるその他の方法は、FPSを減らすことです。私が誤解していないなら、MooToolsは標準で50 FPSを持っています。しかしながら、FPSを低減することは、知覚される性能に影響を及ぼし得る。ここで
Lucaは、ハードウェアアクセラレーションとWebkitトランスフォームを使用することで高速化できます。問題は、異なるブラウザがこれを異なる程度でサポートしていることです。うまくいけばないツー遠い未来では、ブラウザでのハードウェアアクセラレーションのサポートが良くなる
http://mir.aculo.us/2010/06/04/making-an-ipad-html5-app-making-it-really-fast/
を参照してください。
これのフロントページを見てくださいsite 5枚の画像は、回転、純粋なcss2、html4、javascriptでフェードインとフェードアウトしています（私が知っている限り）。 javascriptはちょっと前に書かれたものですが、それは十分に滑らかであるようです。それがあなたのマシン上でどうなっているかを見てください。遅れている場合は、100の代わりに150または200msといったより遅いアップデートで試してみることができます。
パフォーマンスはほとんどjavascriptコードの有効性に関連しています。任意のフレームワーク（jQuery、Mootools）を使用していますか？
ところで、新しいCSS3 transitionは、これらのシナリオのために行く方法でしょう。
執筆時点では、Gecko 2（Firefox 4）、Webkit（Safari and 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 < 4とIE）、そしてそれらにいくつかの専用のJavascriptコードを送ります。少し休んでも、常に優雅な劣化原理があります。私はすぐに一緒に要求されるようにcanvasタグを使用して色褪せた画像の一例を投げた
すべてのブラウザで動作するコードです： 頭に追加します。
/* ****************************
* updated for all browsers by
* Evan Neumann of Orbiting Eden on
* October 6, 2011.
* www.orbitingeden.com - [email protected]
* 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 -->
をして体に2つの要素を追加します。最初はコンテナの背景要素です。私はdivを使用していますが、td、bodyなどは動作するはずです。 2番目は前景画像です。最後に、<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>
不透明度をどの程度速く変えたのでしょうか？私は100msごとに非常に似たようなやり方でスムーズな移行を実現しました。 –
現時点ではHTML5には注意が必要ですが、実際に使用されているブラウザで広くサポートされるにはもう少し時間がかかります（ほとんどのブラウザの最新バージョンでサポートされていますが、ほとんどのインターネットは最新バージョンを使用しません）。 – Endophage
あなたのコードを提供できますか？これにより、パフォーマンスの問題を簡単に把握することができます。 –