Gestion de grands ensembles d'images en utilisant Javascript sur MobileSafari

Question

Je cherche des moyens de gérer un grand nombre d'images dans Mobile Safari pour iPad. Dans ce cas, j'ai une application web qui va déplacer les images en utilisant des animations webkit CSS3 (supposément tirer parti du matériel pour le faire).

J'ai remarqué que si j'avais plus de 10 grandes images (200-300K chacune), j'ai rencontré de gros problèmes de performance. Les animations sont saccadée etc.

J'ai lu que, dans certains Safari tests cessera d'accepter les images et afficher l'icône « ? ». Une solution de contournement consiste à dessiner des images à un élément CANVAS en utilisant drawImage(). Outre la recherche d'une solution de travail basée sur CANVAS, quelqu'un a-t-il des stratégies pour charger/décharger des images (disons 30 à 100 images de 300K) alors qu'ils en ont besoin? (Je devine Non, mais il vaut la peine de demander)

Answer 1

Vous souhaitez probablement consulter ce billet de blog: iPad + HTML5 + Javascript Memory Management.

Answer 2

Le GPU a une quantité limitée de mémoire de texture. Le rendu d'images utilise cette ressource. Une fois épuisé, le système d'exploitation passe beaucoup de temps à décharger/recharger la mémoire de texture. La meilleure façon d'obtenir de meilleures performances consiste à ne pas afficher autant de grandes images à la fois, surtout si la plupart d'entre elles ne se trouvent pas sur la partie de la page Web visible par l'utilisateur. Peut-être sauvegarder et remplacer ces images avec un rect rectiligne (ou une vignette lowres) sur la page Web jusqu'à ce qu'ils défilent dans la vue.