Question

I’ve done a couple of sites and know basic html, javascript and php.

I’ve recently created a site, themefinder.dk, which works as I had intended, except for when it is intially loading. The images a shown “out of position” for a couple of seconds, before they are moved to the correct location. Here’s a picture.

My problem is how to deal with this.

I’ve found some things I think are affecting this:
– Removing position:absolute from the .image class resolves the loading problem, but in turn causes to page not to look as intended.
– There’s a large amount of DOM elements on the page.
– Javascript is run on document.ready

I’ve tried playing around with the above, but have not been successful yet. Any ideas or thoughts on how to resolve this would be most welcome.

I’m currently looking into ajax, to find a way or reducing the initial amount of loaded images. But i’ve got no experience with it yet, so would be great with a solution while i learn more about ajax.

Please let me know if i should elaborate more on my html structure or anything on the site. Any help is much appreciated.

Best regards
Anders

Answer 1

No need to use ajax for load image. You can just create image element in javascript as soon as page loaded.

var yourimage = $("<img />").attr('src', 'http://yourimageurl.com/image.jpg')
                      .load(function() {
                         if (!this.complete || typeof this.naturalWidth == "undefined" || this.naturalWidth == 0) {
                             alert('Can\'t load image');
                         } else {
                             $("#someid").append(yourimage);
                         }
                      });