J'écris une application Web qui implique un cycle continu de créer (et de supprimer) un bon nombre d'images sur une page Web. Chaque image est générée dynamiquement par le serveur. Dans certains cas, certaines de ces images survivent à leur utilité avant d'avoir terminé le téléchargement. À ce stade, je les retire de la DOM. Le problème est que le navigateur continue de télécharger ces images même après avoir été supprimée du DOM . Cela crée un goulot d'étranglement, car j'ai de nouvelles images en attente d'être téléchargées, mais elles doivent attendre les anciennes images inutiles pour finir en télécharge d'abord. Je voudrais Abandon Ceux-ci Téléchargements d'images inutiles. La solution évidente semble pour demander les données d'image binaires via AJAX (puisque les demandes AJAX peuvent être abandonnées) et définir le téléchargement une fois le téléchargement terminé: Mais le problème est que cette ligne ne fonctionne pas comme je l'avais espéré: J'ai cherché haut et bas. N'y a-t-il aucun moyen de définir une source d'image sur les données d'image binaires envoyées via AJAX?
3 Réponses :
Essayez par ex.
... où this.src = "Données: image / png; base64, xxx"
xxx est vos données binaires, base64-codées. Ajustez le type de contenu si nécessaire. Je ne serais pas optimiste à propos du support de navigateur large pour cela, cependant.
Merci pour votre réponse. Malheureusement, j'ai besoin d'un soutien de navigateur assez large - et je ne suis pas sûr que la base64-coding fonctionnera; J'ai besoin que ces images soient aussi petites que possible.
Vous devriez pouvoir utiliser URIS de données , similaire à La solution j'ai identifiée dans un question antérieure. Notez que cela ne fonctionnera pas avec les navigateurs plus anciens.
Intéressant. Malheureusement, j'ai besoin de soutien aux navigateurs aussi vieux que IE6 et Firefox 2. Votre solution prend-elle en charge ceux-ci?
Voir cette réponse (
Vous devriez avoir à base64-coder le dans un Données: URI pour atteindre cela. Mais cela ne fonctionnerait pas dans IE6-7 et il y a des limitations sur la quantité de données que vous pouvez y mettre, en particulier sur IE8. Cela peut être utile comme une optimisation des navigateurs où elle est soutenue, mais je ne voudrais pas compter sur elle.
Une autre approche possible consiste à utiliser le xmlhttprequest pour précharger l'image, puis supprimer la réponse et définir le src d'une nouvelle image pour pointer vers la même adresse. L'image doit être chargée à partir du cache du navigateur. Cependant, dans le cas où vous générez des images de manière dynamique, vous devez accorder une attention particulière à vos en-têtes de mise en cache afin de vous assurer que la réponse est mise en cache.