Comment charger une image de manière asynchrone ?

Question

Je charge une image sur une carte de texture avec GLGE (un peu comme webGl). Cependant, pour des raisons de rapidité de chargement, je charge d'abord une image à basse résolution (ce qui serait plus rapide) et je veux ensuite modifier la valeur de l'image. src à l'image haute résolution une fois que la grande image est chargée. Voici ce que je fais maintenant

var texture =  new GLGE.texture();
function updateTexture(){
    var image=new Image();
    image.src = "models/testLargeMap_map0.jpg"; // load image

    image.onload = function(){
        texture.image("models/testLargeMap_map0.jpg"); // supposedly swap image on load (not working as I thought)
    }   
}

Cependant, lorsque pendant cette période de changement de src, le modèle et toutes ses fonctions se figent. Comment puis-je faire en sorte que l'image soit chargée de manière asynchrone et que, lors du chargement, elle soit échangée contre la texture supérieure pour un changement de texture instantané et fluide ?

Answer 1

Vous pouvez définir un image.onload le gestionnaire d'événement comme ceci :

var big_image = new Image();
big_image.onload = function () {
    texture.image("models/testLargeMap_map0.jpg");
}
big_image.src = "models/testLargeMap_map0.jpg";

(Notez que j'ai d'abord défini le gestionnaire onload, puis l'attribut src. Si je le fais dans l'autre sens, cela échoue dans IE).

Cela permettra de précharger l'image avant d'appeler texture.image . Je ne connais rien de cette bibliothèque, je ne peux donc pas être certain qu'elle sera utiliser l'image préchargée.

Answer 2

L'image.src demandera l'image au serveur et déclenchera l'événement onload, et vous demandez à nouveau que l'image soit échangée, ce qui la fige. Pourquoi avez-vous besoin de cette approche ? Vous pouvez avoir une meilleure façon de faire comme, permettre à l'image de basse résolution d'être chargée d'abord puis assigner l'événement onmouseover ou onclick pour l'image à ce moment-là vous pouvez montrer une popup comme celle montrée sur google images et ensuite dans celle-ci juste afficher les images de haute résolution. À ce moment-là, vous demanderez une seule image et le processus sera plus rapide. J'espère que cela vous aidera.

Answer 3

Je ne suis pas familier avec "GLGE" mais il semble que le problème soit que la méthode .image() charge à nouveau l'image (peu importe si cela se produit dans le gestionnaire d'événement de chargement pour la même image).

Donc, à moins que vous puissiez définir le image reference directement, comme

texture = this; // within the load handler

il n'y a aucun moyen de le faire avec cette bibliothèque.