Page 1 of 1

Lazy Load Images - responsive... but how?

Posted: Wed Apr 13, 2016 2:53 pm
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?

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

Posted: Wed Apr 13, 2016 3:06 pm
by Celauran
simonmlewis wrote:who sets height of images these days????
We certainly do. We'll often resize images in steps based on breakpoints.

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

Posted: Wed Apr 13, 2016 3:07 pm
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/

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

Posted: Wed Apr 13, 2016 3:31 pm
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??

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

Posted: Thu Apr 14, 2016 3:16 am
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?

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

Posted: Thu Apr 14, 2016 6:38 am
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.

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

Posted: Thu Apr 14, 2016 6:56 am
by simonmlewis
How do I do that? If I do CTRL + Shift + J, it generates a popup with no Images tab.

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

Posted: Thu Apr 14, 2016 7:18 am
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)

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

Posted: Thu Apr 14, 2016 8:01 am
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"...

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

Posted: Thu Apr 14, 2016 8:07 am
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.

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

Posted: Thu Apr 14, 2016 8:13 am
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.

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

Posted: Thu Apr 14, 2016 8:22 am
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.

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

Posted: Wed Jun 08, 2016 5:05 am
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.