PHP Developers Network

A community of PHP developers offering assistance, advice, discussion, and friendship.
 
Loading
It is currently Thu Oct 19, 2017 2:47 pm

All times are UTC - 5 hours




Post new topic Reply to topic  [ 13 posts ] 
Author Message
PostPosted: Wed Apr 13, 2016 2:53 pm 
Offline
DevNet Master

Joined: Wed Oct 08, 2008 3:39 pm
Posts: 4349
Location: United Kingdom
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.


Top
 Profile  
 
PostPosted: Wed Apr 13, 2016 3:06 pm 
Offline
Moderator
User avatar

Joined: Tue Nov 09, 2010 3:39 pm
Posts: 6389
Location: Montreal, Canada
simonmlewis wrote:
who sets height of images these days????

We certainly do. We'll often resize images in steps based on breakpoints.

_________________
Supported PHP versions No longer supported versions


Top
 Profile  
 
PostPosted: Wed Apr 13, 2016 3:07 pm 
Offline
Moderator
User avatar

Joined: Tue Nov 09, 2010 3:39 pm
Posts: 6389
Location: Montreal, Canada
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/

_________________
Supported PHP versions No longer supported versions


Top
 Profile  
 
PostPosted: Wed Apr 13, 2016 3:31 pm 
Offline
DevNet Master

Joined: Wed Oct 08, 2008 3:39 pm
Posts: 4349
Location: United Kingdom
Syntax: [ Download ] [ Hide ]
<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.


Top
 Profile  
 
PostPosted: Thu Apr 14, 2016 3:16 am 
Offline
DevNet Master

Joined: Wed Oct 08, 2008 3:39 pm
Posts: 4349
Location: United Kingdom
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.


Top
 Profile  
 
PostPosted: Thu Apr 14, 2016 6:38 am 
Offline
Moderator
User avatar

Joined: Tue Nov 09, 2010 3:39 pm
Posts: 6389
Location: Montreal, Canada
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.

_________________
Supported PHP versions No longer supported versions


Top
 Profile  
 
PostPosted: Thu Apr 14, 2016 6:56 am 
Offline
DevNet Master

Joined: Wed Oct 08, 2008 3:39 pm
Posts: 4349
Location: United Kingdom
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.


Top
 Profile  
 
PostPosted: Thu Apr 14, 2016 7:18 am 
Offline
Moderator
User avatar

Joined: Tue Nov 09, 2010 3:39 pm
Posts: 6389
Location: Montreal, Canada
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
Screen Shot 2016-04-14 at 8.17.23 AM.png [ 783.46 KiB | Viewed 6826 times ]

_________________
Supported PHP versions No longer supported versions
Top
 Profile  
 
PostPosted: Thu Apr 14, 2016 8:01 am 
Offline
DevNet Master

Joined: Wed Oct 08, 2008 3:39 pm
Posts: 4349
Location: United Kingdom
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.


Top
 Profile  
 
PostPosted: Thu Apr 14, 2016 8:07 am 
Offline
Moderator
User avatar

Joined: Tue Nov 09, 2010 3:39 pm
Posts: 6389
Location: Montreal, Canada
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.

_________________
Supported PHP versions No longer supported versions


Top
 Profile  
 
PostPosted: Thu Apr 14, 2016 8:13 am 
Offline
DevNet Master

Joined: Wed Oct 08, 2008 3:39 pm
Posts: 4349
Location: United Kingdom
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.


Top
 Profile  
 
PostPosted: Thu Apr 14, 2016 8:22 am 
Offline
Moderator
User avatar

Joined: Tue Nov 09, 2010 3:39 pm
Posts: 6389
Location: Montreal, Canada
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.

_________________
Supported PHP versions No longer supported versions


Top
 Profile  
 
PostPosted: Wed Jun 08, 2016 5:05 am 
Offline
DevNet Master

Joined: Wed Oct 08, 2008 3:39 pm
Posts: 4349
Location: United Kingdom
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.


Top
 Profile  
 
Display posts from previous:  Sort by  
Post new topic Reply to topic  [ 13 posts ] 

All times are UTC - 5 hours


Who is online

Users browsing this forum: Bing [Bot], Yahoo [Bot] and 10 guests


You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum

Jump to:  
Powered by phpBB® Forum Software © phpBB Group