Problems with image loading in wordpress/is there a better way to achieve this functionality?

Question

I took on a project that I thought would be simple and just a matter of redesign and some slight code altering, but it bewilders me every time I try to fix this thing. I am decent enough at altering php/css to do what I need it to do in wordpress themes, but I can't for the life of me seem to get this thing to work correctly.

The site is here: http://pangaearock.com and another copy worked on by a different developer: http://pangaearock.com/demo/ (this one has a scrollable sidebar, which is necessary)

The site needs to function as it does currently, but the images need to load in a less erratic manner. As you can see, when you highlight an item in the menu on the left, that category of posts highlights in the content area. I have been unsuccessful at recreating this effect or finding a theme/plugin with something similar, so I decided to attempt to fix what was created by a previous developer who was unsuccessful at completing the project. I'm just asking for the general path of getting this done, and I'll learn everything I need to.

It seems like it should be simple, but all they want is for all images to be aligned to the left and covered with a dark overlay with some opacity, and for them to be highlighted once the category name is hovered over. It should be an infinite lazyload gallery so it loads quickly. When the category name or thumbnail is clicked, it will open a gallery page of just the images in that category in a slider/gallery. I can work out the other parts, but this main page is confusing to me. I feel like I should get rid of the header and place the navigation and logo within the sidebar, because they want that fixed to the top of the screen, but in my mind that header is awful aesthetically.

Please give me an info you feel will help. I will answer anything necessary right away, and I understand and apologize if I come off like a complete noob. This project is definitely making me feel that way, trust me. It has been over a month, and I've spent way more time than it has been worth on this, but an agreement is an agreement. Thanks in advance!

Answer 1

Maybe add to the image classes display: none; and show them only when all image files have been cached using $(window).load(function () {$('.img').css(display, 'initial')});