[Angularjs / Ergonomie] Prechargement des images

brokleen
Javascript

Hello,
Je cherche une solution pour précharger des images car les tests que j'ai effectué non pas été très concluents.
J'arrive à afficher un spinner pendant le chargement et afficher l'image quand elle est chargé mais mon problème se porte plus sur le rendu visuelle.
Je n'arrive pas à trouver une solution pour obtenir la taille de l'image avant qu'elle ne soit chargé , pour avoir un rendu sympas et éviter que l'element qui contient le spinner de chargement et l'image ne change de taille.

Pour être encore plus explicite
Taille de l'element pendant le chargement de l'image
[ ]
[ ]
Taille de l'elment quand l'image est chargé
[ ]
[ ]
[ ]

Il faudrait que les deux soient identique.

6 réponses

Grafikart

Ces images viennent d'ou ? Le seul moyen est d'obtenir la taille de l'image en meme temps que l'URL (possible si tu utilise l'api par exemple.

Nono27

Tu as divers méthode pour le préchargement des images

Celle, que je préfére, est le préchargement en javascript

<script type="text/javascript">
        <!--//--><![CDATA[//><!--
            var images = new Array()
            function preload() {
                for (i = 0; i < preload.arguments.length; i++) {
                    images[i] = new Image()
                    images[i].src = preload.arguments[i]
                }
            }
            preload(
                "http://domain.tld/gallery/image-001.jpg",
                "http://domain.tld/gallery/image-002.jpg",
                "http://domain.tld/gallery/image-003.jpg"
            )
        //--><!]]>
    </script>

Tu peux ajouter des événements pour voir la fin du chargement des images et/ou un événement en cas d'erreur.
Et tu peux récupérer les tailles hauteurs/largeurs de l'images ( images[i].width et images[i].height)

J'espère que j'ai répondu à ta question

Grafikart

Le souci c'est que dans son cas il veut la dimension des images avant le chargement de ces dernières

brokleen
Auteur

Me revoilà, les images sont récupéré depuis une API. Tu penses que la solution serait d'envoyer la taille de l'image via l'api ?

Grafikart

Oui c'est la solution la plus simple. C'est ce que j'ai choisit dans mon cas, ça permet de préallouer l'espace et de faire un chargement moins violent ou tout change de taille à chaque image chargée :)

brokleen
Auteur

Bon, finalement je galère ^^'.
Voilà l'organistion de mon code :
J'ai un controller qui récupère les images depuis une api avec un factory.
Les images sont envoyés dans le scope.
Dans la vue il y a un ng-repeat qui affiche toutes les images.

Et maintenant je ne sais pas quoi utiliser pour dire à mon controller ok les images sont toutes chargés.

J'utilise un infinite scroll et à chaque fois qu'une "page d'image" à fini de charger je dois l'informer qui la fini son job pour qu'il se mette en veille et attende que l'utilisateur arrive en bas de la page pour charger la suite.