Images not loading correctly - Grey blocks [closed]

Question

I have a demo here to try and illustrate my problem.

http://www.ttmt.org.uk/forum/wordpress-forum/?page_id=8

It's a simple slideshow photo gallery with thumbnails along the bottom.

The slideshow and the thumbnails are created with the jQuery cycle plugin.

I'm using the NextGen plugin to organise the images into groups.

The images are just added to the page in a long list like so.

  <img class="ngg-singlepic ngg-none" src="http://www.ttmt.org.uk/forum/wordpress-forum/wp-content/gallery/trucks/03.jpg" alt="03" />

  <img class="ngg-singlepic ngg-none" src="http://www.ttmt.org.uk/forum/wordpress-forum/wp-content/gallery/trucks/04.jpg" alt="04" />

so the page is just images.

My problem is sometimes when the page loads the images don't load correctly and the images are partly covered with grey boxes like this - http://www.ttmt.org.uk/forum/site.png

If the images don't load correctly I have to delete the browser cache and try reloading the page, refreshing the page won't load the images correctly.

If the image loads with the grey blocks it also appears with the grey blocks in the wordpress UI like this - http://www.ttmt.org.uk/forum/wordpress.png

What are these grey boxes, is it Wordpress, the Cycle plugin or NextGen Gallery?

Is it because I am adding the images directly to a page?

Any help with this would be greatly appreciated.

Answer 1

This has nothing to do with WordPress and everything to do with the size of your images.

You're loading over 50 images, each of which is over 100K. Loading a handful (less than 10) images isn't a problem, but what you're seeing right now is an image timeout problem.

In some browsers (like Internet Explorer), the timed out image partially displays - the part of the image that was successfully downloaded is visible, but the rest of the image is filled in with a neutral gray.

In other browsers (like Chrome), the timed out image doesn't display at all. Instead, you get a standard "broken image" icon.

Here's an example of what I see in Chrome, with the broken parts highlighted. You can see that the current image doesn't even display in the main area.

There are some ways to fix this:

1. Compress your images to make sure they are the absolute smallest size possible
2. Use fewer images
3. Implement some kind of lazy load feature so that your images aren't downloaded until they're actually needed.

Of all 3 options, #2 is by far the easiest to implement, but #3 would be the most performant. Unfortunately, you'll likely need to hire a developer for #3 because the NextGen plugin doesn't ship with such a feature.