Lazy Load Images - responsive... but how?

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

Lazy Load Images - responsive... but how?

Post by simonmlewis »

We are looking at using the Lazy Images idea, so they load as the page is scrolled down.
I've seen it done in Wordpress sites.

How do you do it for real though without a plugin.
I've read that it's done by the image width and height, but who sets height of images these days????
We only set the image to be 100% width of a containing DIV.

So how do you do it with that?
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
User avatar
Celauran
Moderator
Posts: 6427
Joined: Tue Nov 09, 2010 2:39 pm
Location: Montreal, Canada

Re: Lazy Load Images - responsive... but how?

Post by Celauran »

simonmlewis wrote:who sets height of images these days????
We certainly do. We'll often resize images in steps based on breakpoints.
User avatar
Celauran
Moderator
Posts: 6427
Joined: Tue Nov 09, 2010 2:39 pm
Location: Montreal, Canada

Re: Lazy Load Images - responsive... but how?

Post by Celauran »

simonmlewis wrote:We are looking at using the Lazy Images idea, so they load as the page is scrolled down.
I've seen it done in Wordpress sites.

How do you do it for real though without a plugin.
https://luis-almeida.github.io/unveil/
simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

Re: Lazy Load Images - responsive... but how?

Post by simonmlewis »

Code: Select all

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="/js/unveil.js"></script> 
<script>
$(document).ready(function() {
  $("img").unveil();
});
</script>echo "<img src='/images/productphotos/small/$row->photoprimary'  alt='$row->title' data-src='/images/productphotos/small/$row->photoprimary' />";


What am I missing?
I have the js file copied straight from the gibhub page. But all images (stored locally), load instantly.
Should I be adding something to the CSS to not show them??
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

Re: Lazy Load Images - responsive... but how?

Post by simonmlewis »

I think I got to the bottom of it.
But a question: does this stop the images being loaded by the browser from the server, or does it just stop the images from being shown, until the browser is looking at them?

So if you had a page with 8MB of images, would it show only, say, 2mb of them, until you scroll up, and then load another 2-3mb of them from the server?
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
User avatar
Celauran
Moderator
Posts: 6427
Joined: Tue Nov 09, 2010 2:39 pm
Location: Montreal, Canada

Re: Lazy Load Images - responsive... but how?

Post by Celauran »

Should be easy enough to test. Open up the developer tools in your browser, select the images tab, load the page, see what gets called before you scroll.
simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

Re: Lazy Load Images - responsive... but how?

Post by simonmlewis »

How do I do that? If I do CTRL + Shift + J, it generates a popup with no Images tab.
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
User avatar
Celauran
Moderator
Posts: 6427
Joined: Tue Nov 09, 2010 2:39 pm
Location: Montreal, Canada

Re: Lazy Load Images - responsive... but how?

Post by Celauran »

Images is a sub tab of Network. It's going to vary some by browser, but F12 in Firefox, then Network, then Images at the bottom. (See attached)
Attachments
Screen Shot 2016-04-14 at 8.17.23 AM.png
simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

Re: Lazy Load Images - responsive... but how?

Post by simonmlewis »

OH yes, it does seem to do it like that.
I Wasn't sure if it would load it from the network, and hold fire on it showing on screen.
So that it speeds up the page, but still uses "bandwidth"...
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
User avatar
Celauran
Moderator
Posts: 6427
Joined: Tue Nov 09, 2010 2:39 pm
Location: Montreal, Canada

Re: Lazy Load Images - responsive... but how?

Post by Celauran »

Well you'd need to load the images at some point, so the bandwidth issue is a bit of a wash. Plus they'll be cached, so they really only need to be fetched once. 8MB is a ton of images though.
simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

Re: Lazy Load Images - responsive... but how?

Post by simonmlewis »

I know...
It's the homepage that has a lot. That aside, what we want is for the page to load, and only the images on screen to be downloaded. Which is what I think that script does?!?!?!

So that if they choose to scroll down, then more will be downloaded. MEaning the rest of the page loads much quicker.

Rather than 8mb being downloaded in one lump, only a quarter of it is downloaded.... at a time.
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
User avatar
Celauran
Moderator
Posts: 6427
Joined: Tue Nov 09, 2010 2:39 pm
Location: Montreal, Canada

Re: Lazy Load Images - responsive... but how?

Post by Celauran »

simonmlewis wrote:what we want is for the page to load, and only the images on screen to be downloaded. Which is what I think that script does?!?!?!
Yes, that's how the script works. Firing up the page with the network tab open, you'll see additional GET requests being fired for images only once you start scrolling. This will speed up initial page load, though may slow down scrolling as the additional images need to be fetched. Depends on the size and number of images being called.
simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

Re: Lazy Load Images - responsive... but how?

Post by simonmlewis »

I am using this script as suggested:
https://luis-almeida.github.io/unveil/

But we are having problems with it working on a slider (owl slider).
We can in fact NOT use it for that since that opens at the very top of the page.

Trouble is, if I put unveil.php at the top of the page, it works for the slider, but images below that, won't load.
If I put it after the slider code, the images below all unveil correctly, but the slider doesn't even show!

Ideally, we dont' want the slider to be touched. I have tried to override it by setting the img tag for the slider images to be opacity: 1, but the DIV itself just won't show on screen. It's there in code, but nothing loads.
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
Post Reply