jQuery Forum

Ca you please elaborate a bit more? you need to load actual images which are outside the viewport and not lazy load them?

Thanks for your answer!

Sorry, yes of course, it's a bit incomprehensive what I posted.  I'll go into more detail:

I would like to integrate this plugin: http://www.appelsiini.net/projects/lazyload
into this one: http://4nf.org/change-content-div/

with the benefit of further accelerating page loads.

Now, the Lazyload plugin expects image data of the user to be delivered in an altered format:

1. <img data-original=“img/example.jpg” src=“img/grey.gif” width=“640” height=“480”>

I'm wondering if I could perform the following in a jQuery pre-run, either directly after the "ready" event but definitely before the Lazyload plugin gets called:

- Select all images on the page or those outside of the current viewport
- Set src= to "img/grey.gif" everywhere and
- store the original image URL in "data-original"
- without altering "width" and "height"

That way, the webmaster would not have to do anything manually at all and could offer the increased loading speed "out-of-the-box".

What do you think?  Is it possible or are there reasons, why the Lazyload plugin doesn't do this already?


Cheers and greetings

It's too late to stop the img requests. The point of lazy loading is to never make an img request unless it will be seen.

Hi Jakecigar!

Thanks, much appreciated!

Yes, I've researched this a bit more in the meantime - it's as you say, the image requests are on their way, even straight after the "ready" event.

http://stackoverflow.com/questions/8058676/is-it-possible-to-run-javascript-before-images-begin-loading

So, as you say, doing the pre-formatting in PHP would be possible.

What do you think of image lazy-loading?  Does it make sense at all?
My desire would be to show-off even quicker page load times, as is crucial for demonstration purposes for my plugin...

So the new question is: "How can I pre-process the images on the server-side generically?"

In my use-case, the images in question are defined as background-images in the CSS, inside the definition of the Wordpress theme.

I would like to generically transform them at a central point of execution on the server-side in PHP, instead of pre-processing each one manually...  Ideally, this modification code could be provided as a server-side add-on to the Lazyload plugin...

Any ideas how that can be done?

EDIT: Just found this, which explains the advantages:

http://speckyboy.com/2012/10/18/how-to-create-lazy-loading-images-for-your-website/

The built-in fade-in effect, which is easy to address seems to add value to the technique.

I would now love to provide a generic way of pre-processing the image data, be it specific to PHP/Wordpress.  Maybe that could be provided as a WP-Plugin or even better, generic PHP snippet that is collaborative with the popular Lazyload plugin...


Thanks once more and kind regards

Lazy loading is good when you have hundreds/thousands of images.

...just before calling the actual Lazyload plugin, right?

Leaves only the question, where there's a good and central server-side point-in-time to do it, be it limited to PHP and/or Wordpress.

Any ideas?


Thanks very much Jake!

It all depends on where the URLs to the images come from.

JΛ̊KE

Thanks Jake!

Well, in my humble case (less than a hundred images) from within a CSS.
However, I would see the potential for generalising the approach for other users.

On the jQuery side, due to the beauty of jQuery it's easy:

<pull all images in Lazyload format from the server>

what's the mirror image on the server-side - it ought to be centralised
(the pendant of a jQuery select I suppose across all images on the page)

I've used PHP "DOMDocument class" before for similar jobs, but it ought to be simpler than that.

As you say, if it pertains to hundreds or even thousands of images, it's quite annoying and poorly maintainable to go through all of them manually and then being vulnerable to change in the interface!

So a centralised collection on the server-side would be a blessing!

Anybody done a similar job on the server-side before
(emulating a jQuery "select" centrally across the page only) ?

Is there any way to lazyload images that are coming from within a CSS at all?

Maybe I could do it at least for 4nf.org to boost performance of the showcase...

No. There are other techniques for optimizing images in CSS. Sprites are used in jQuery UI and other large projects.

JΛ̊KE

Thanks Jake!