Delay Image loading

[JackC]

Hi,

Here is a site that I am working on http://be-a.co.uk/

Here is the test result http://www.webpagetest.org/result/120915...1/details/

As you can see, the site make extensive use of images ~110. I want to find a way of only loading the images that are above the fold and delaying the rest of the images until the page has actually loaded. I am running WordPress and I have the Lazy Loader plugin installed, but it doesn't seem to be working.

Does anyone know how I can implement this, because I can't see the load time decreasing significantly any other way.

Thanks,

Jack

[pmeenan]

Have you tried posting the the lazy load support forum? http://wordpress.org/support/plugin/lazy-load

I was going to recommend checking out the Sonar library that Dave Artz created but it looks like that's exactly what the plugin uses.

I don't see any calls out to load the lazy load javascript on your page load so it looks very much like it's not active or hooked in correctly.

[JackC]

(09-18-2012 12:55 AM)pmeenan Wrote:  Have you tried posting the the lazy load support forum? http://wordpress.org/support/plugin/lazy-load

I was going to recommend checking out the Sonar library that Dave Artz created but it looks like that's exactly what the plugin uses.

I don't see any calls out to load the lazy load javascript on your page load so it looks very much like it's not active or hooked in correctly.

I've disabled the plugin because it wasn't working. Is that the only way of delaying the loading?

Thanks.

[pmeenan]

It's certainly not the "only" way but it's the only "click this button and install plugin" method I'm aware of.

There are some jquery libraries - http://www.appelsiini.net/projects/lazyload for example but they will require a fair bit of coding to integrate with wordpress because you will need to change how wordpress writes img tags.

Fundamentally they all work by referencing a small placeholder image and storing the real URL in a different attribute. Javascript runs at some later point in time and swaps the src attribute with the real url. Implementation isn't really that fancy but it requires dev work to do.

You could try a site accelerator like Page Speed Service ( https://developers.google.com/speed/pagespeed/service ) which has a filter that prioritizes visible content and lazy-loads images.

[JackC]

OK. I'll take a look at that. Thanks.