Lazy Load Images - responsive... but how?
Moderator: General Moderators
-
simonmlewis
- DevNet Master
- Posts: 4435
- Joined: Wed Oct 08, 2008 3:39 pm
- Location: United Kingdom
- Contact:
Lazy Load Images - responsive... but how?
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?
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.
All the best from the United Kingdom.
Re: Lazy Load Images - responsive... but how?
We certainly do. We'll often resize images in steps based on breakpoints.simonmlewis wrote:who sets height of images these days????
Re: Lazy Load Images - responsive... but how?
https://luis-almeida.github.io/unveil/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.
-
simonmlewis
- DevNet Master
- Posts: 4435
- Joined: Wed Oct 08, 2008 3:39 pm
- Location: United Kingdom
- Contact:
Re: Lazy Load Images - responsive... but how?
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' />";
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.
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?
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?
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.
All the best from the United Kingdom.
Re: Lazy Load Images - responsive... but how?
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?
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.
All the best from the United Kingdom.
Re: Lazy Load Images - responsive... but how?
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)
-
simonmlewis
- DevNet Master
- Posts: 4435
- Joined: Wed Oct 08, 2008 3:39 pm
- Location: United Kingdom
- Contact:
Re: Lazy Load Images - responsive... but how?
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"...
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.
All the best from the United Kingdom.
Re: Lazy Load Images - responsive... but how?
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?
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.
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.
All the best from the United Kingdom.
Re: Lazy Load Images - responsive... but how?
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 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?!?!?!
-
simonmlewis
- DevNet Master
- Posts: 4435
- Joined: Wed Oct 08, 2008 3:39 pm
- Location: United Kingdom
- Contact:
Re: Lazy Load Images - responsive... but how?
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.
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.
All the best from the United Kingdom.