How can I control the order of how the images load on a web page?

You will need to use javascript to control order of loading images in the page, you can write custom javascript and use setTimeOut function, or you need to use lazyload plugs by jQuery or others.

 Below are some of js samples you can use:

http://luis-almeida.github.io/unveil/

http://jqueryfordesigners.com/image-loading/

http://www.appelsiini.net/projects/lazyload

One way is to use AJAX and control the order in JavaScript. Basically load tge second image only after the forst image is completely loaded.

Another way is to download all the images and keep them hidden. Then when all the images have been downloaded you can set one image at a time as visible.

First of all Good Question !  ,Hope your question is

"how the browser (webkit) is rendering the webpage and diplaying the image contnet "?

My answer is regarding the "webkit" ,

order of rendering is a traversal of DOM tree (datastructure) (In order or postorder)

If you need specificaly control your image may use cleint side script like jquery , js  

There are lot process taking place inoreder to diplay a image 

• Webcore creates a DOM tree each html page 
• Each Source URL of the image DOM object is downloaded and cached  
• Image decoded and bit map image is given to graphics layer (Eg: OpenGL) 
• For efficeincy and saving faster rendering images are cached