How does jquery display an image received from an ajax request?

Question

I have this working great, but I'd like a deeper understanding of what is actually going on behind the scenes.

I am using Jquery's Ajax method to pull 5 blog posts (returning only the title and first photo). A PHP script grabs the blog posts' title and first photo and sticks it in an array and sends it back to my browser as JSON.

Upon receiving the JSON object, Jquery grabs the first member of the JSON object and displays it's title and photo. In a gallery I made, using buttons – the user can iterate the 1-5 posts.

So the actual AJAX call happens right away, and only once. I am basically using this kind of setup: $('my_div').html(json_obj[i]) and each click does a i++.

So jquery is plucking these blog posts from my computers memory, my web browsers cache, or some kind of cache in the Javascript engine?

One of the things it's returning is a pretty gnarly animated gif. I just wonder if it constantly running in the background (but not visible), stealing processing cycles...etc. Or Javascript just inserting (say a flash movie) into the DOM, but before hand does nothing but take up a little memory (no processing).

Anyway, I'm just curious. If someone is a guru on this, I'd love to hear your take. Thanks!!

Answer 1

It looks like you are keeping the json in an array and sending it the dom on click. Stuff in the json array wont take any processing cycles this way.

Answer 2

JavaScript does nothing. It only stores whatever you insert (links to external images, text, etc.) in memory. When you insert it into DOM, your browser processes the content by displaying text and graphics, which in turn can be loaded directly from an external server or from browser cache.

Answer 3

The JSON that gets returned contains the html to display the header and image.

When the img element that the json contained is added to the DOM (<img src="blah">) then the browser actually downloads the image into the cache. At this point, the image is just a bunch of binary data that doesn't turn into anything until the web browser interprets it and displays it onscreen. Your animated GIF is not taking up any processing cycles or extra memory until it actually is displayed onscreen.