Load images in particular order, once loaded- fade in
Hi guys. First of let me say that I am not actually a webdesigner or developer, I haven't fiddled with it in years, and javascript and especcially all these new frameworks are a bit new to me, so I need a little help getting started.
I am making myself a new portfolio for my photography, I wanted to keep it really simple, so I just have a static div for some contact info and such and a horizontal scrollable div that holds a lot of images. I figured that the browser reads and loads the images in the same order as they appear in the html code, but that doesn't seem to be the case. Instead it sometimes loads the very last image, or all at the same time. Which is a problem because it makes the 3 first images in the div (the one that the visitor sees when he loads the page) load very slowly.
Therefore I need a way to load the images that the visitor will see first, first. Is this something Jquery can help me achieve, and if so - how?
Bonus question:
I've never liked the way most browsers load large images, showing them all pixelated and half-rendered.
So I would like to use the lovely fade-in from jQuery to fade each image once the image has been fully loaded, and hide it while it is loading.
I would really appreciate any help you can give me, and I'm sorry if I come off as if I want you to code my site for me.
//Edit:
After some hours digging around I found this
http://www.chazzuka.com/blog/?p=87#more-87
tutorial, I haven't tried it out yet, but I figured I'd give it a shot and come back if something isn't working.