Geek Answers Handbook

How to upload an image asynchronously?

I upload an image to a texture map using GLGE (sorta like webGl). However, for the download speed, I first upload a low resolution image (which would be faster), and then I need to change src to a high resolution image after loading a large image. This is what I do now

 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) } }

However, when during this period the src changes, the model and all its functions freeze. How to make it load the image asynchronously and change it to a higher texture when loading to smoothly instantly change the texture?

+4
source share
3 answers

You can set the image.onload event image.onload as follows:

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

(Note that I first set the onload handler and then set the src attribute. If I do it the other way around, it does not work in IE).

Preload the image before calling texture.image . I don’t know anything about this library, so I can’t be sure that it will use the preloaded image.

+3
source

image.src will request an image from the server, and it will trigger an onload event, and again u will request an image exchange so that it hangs. Why do you need this approach. You may have a better way to do this, for example, first loading a low resolution image, and then assigning an onmouseover or onclick event to the image at this time. U can display a popup as shown in google images, and then it just displays high resolution images. At this time, u will request one image, the process will be faster. Hope this helps you.

0
source

I am not familiar with "GLGE", but it seems that the problem is that the .image() method loads the image again (sort of regardless of whether it happens in the load event handler for the same image).

So, if you cannot directly install image reference , for example

 texture = this; // within the load handler

There is no way to accomplish this using this library.

0
source

More articles:


All Articles