Les transitions Javascript sur les images à l'échelle CSS fonctionnent mal

Question

Je travaille sur une galerie de première page qui a plusieurs images, mise à l'échelle pour s'adapter à la page via CSS.

Les images fondu de l'une à l'autre (superposées) et seront redimensionnées si l'utilisateur redimensionne le navigateur pour utiliser l'espace.

Le problème est que l'évanouissement de l'image fonctionne terriblement sur la plupart des navigateurs et sur tous les ordinateurs, sauf les plus récents. Toutefois, si les images ne sont pas étirées, les performances sont parfaites sur tous les navigateurs de la plupart des ordinateurs. J'ai déjà rencontré ce problème avec d'autres sites que j'ai conçus et j'ai passé beaucoup de temps à rechercher et tester des solutions, mais je n'arrive pas à trouver quoi que ce soit.

Des idées?

---

J'ai implémenté un compromis performance/style. Au lieu de mettre à l'échelle arbitrairement les images, disons par un facteur de 0.7543234, je l'arrondis à 8 et ainsi de suite. J'ai trouvé que les facteurs de mise à l'échelle arbitraires ont une énorme pénalité de performance, et l'utilisation de la mise à l'échelle décimale unique réduit considérablement cela.

Voici un code js:

var adjustedNewWidth = Math.round((roundNumber((newWidth/originalImage.width), 1)+0.1)*originalImage.width); 

var adjustedNewHeight = Math.round((roundNumber((newHeight/originalImage.height), 1)+0.1)*originalImage.height); 

• newWidth est la largeur désirée,
• originalImage.width est mon tableau où je garde l'image d'origine tailles (depuis js est si intelligent qu'il ne peut pas accéder après leur mise à l'échelle),
• roundNumebr est une fonction qui échelles à la plus proche décimale

function roundNumber(num, dec) { var result = Math.round(num*Math.pow(10,dec))/Math.pow(10,dec); return result; }

Après cela, le fading travaille environ 50% de mieux, mais est toujours pas parfait. Eh bien merci pour votre aide tout le monde espère que cela aide quelqu'un là-bas.

Answer 1

La perte de performance due à la façon dont les navigateurs évoluent et affichent des informations et des images.

Essayez d'ajouter ce qui suit à tout ce qui sera mis à l'échelle:

-ms-interpolation-mode: nearest-neighbor; 
image-rendering: optimizeSpeed; 

Cela se le filtrage tandis que l'image est mise à l'échelle qui rend beaucoup plus rapide sur des machines lentes.

Après l'animation est terminée, définissez les styles de l'élément:

-ms-interpolation-mode: bicubic; 
image-rendering: optimizeQuality; 

également le script d'arrondi semble invoquer Math beaucoup quand arrondi, cela est assez lent quand il est répété à plusieurs reprises (comme dans une animation) .Vous pouvez réduire les frais généraux en remplaçant le script d'arrondi avec cette version plus maigre: