Had an idea the other day for an interesting website layout, but I'm not sure how intensive the mechanics behind it would be... I don't want to give away too much at this point, but perhaps someone could help clear up a few queries I have regarding the general concept?

 

I've never used any sort of 'lazy loading' setup before, so it's a completely new field to me. I believe there are different methods that would fit this description; so when I talk about 'lazy load', I'm referring specifically to the idea of only loading the contents in question when it scrolls onto the screen.

 

 

The Content

I want to lazy load a div with all it's contents. The majority of information I can find for noobs (such as myself) cover lazy loading images specifically. The rest of it is aimed at the more experienced group without clear step-by-step descriptions.

 

So can this idea be applied to a div (perhaps linked by ID) containing any type of content?

 

PHP vs jQuery

The end result will be in a PHP based site (WordPress template, and/or perhaps a different CMS later if that makes any difference), but I'm not sure which method would work best or work at all for my intended purpose.

 

I assume for the purpose of tracking the position of the page in the viewport, jQuery (or at least JS in general) would be the way to go here?

I've seen a Wordpress plugin that does exactly that... I can't remember what it's called. I'll edit this as soon as a find it because I'm too impatient to look it up then post

 

OK so its called jQuery Image Lazy Load WP and it does do lazy loading but only images so my bad. Not sure if that'll help you but maybe you can go through the code and maybe it could help?

 

And I guess that means JQuery is the way to go?

Edited September 1, 201115 yr by Malick

OK so its called jQuery Image Lazy Load WP and it does do lazy loading but only images so my bad. Not sure if that'll help you but maybe you can go through the code and maybe it could help?

Yeah, that's the problem with most of the information I've found online... It either goes way over my head, or it's aimed at images directly.

 

And I guess that means JQuery is the way to go?

Considering it must be triggered when the page is scrolled, I assumed as much.. I'm still learning* PHP, so I just wanted some confirmation of that.

 

In theory, I should be able to use a straight 'lazy load' plugin such as this one, and simply assign the div's ID instead of 'img', right? I know that particular plugin has issues with different browsers, I'm still looking for a more updated one.

 

* - I'm actually trying to teach myself, I don't know anybody else that knows it... Or HTML, or CSS, or JS.

 

 

Edit: I think... I think I may have found it. Maybe.. According to this article, I should be able to use this:

 

$('#forms').load('content/headerForms.html', function() {
   // Code here runs once the content has loaded
   // Put all your event handlers etc. here.
});

 

So... In theory, combining this concept with Viewport Selectors for the script trigger, I should be able to load a piece of PHP script in a template file with the containing div scrolls into view.

 

I love theories.. Really do. But I'll have to wait until I get home from work to try it out. I don't have my own domain to play with (yet), nor do I have any sort of PHP server installed on my work PC.

 

Mind you, speaking of work... I should probably get back to my user manuals now. Technically, my lunch break ended over an hour back.

Edited September 1, 201115 yr by ZaLiTH

Well good luck with all that because the only thing I can help you with was that wordpress plugin

 

Well if you want a server offline use a WAMP (but you said work computer so I guess you might already have that at home).

 

As far as javascript goes I'm no help at all but CSS and HTML i can help with but I doubt you need any.

 

If you do find out how to do it let us know. I don't particularly need it but I'm sure someone somewhere'll find it useful!

Edited September 1, 201115 yr by Malick

I've recently used this plugin:

 

http://www.infinite-scroll.com/

 

worked really well, so when you reach the bottom of the post it automatically loads the next page underneath it. If I understand what you mean.

Well if you want a server offline use a WAMP (but you said work computer so I guess you might already have that at home).

Yup, I've got my home PC set up quite nicely for all that stuff. I spend many hours at night playing around with this sort of stuff.. Guess you could say it's a hobby bordering on an obsession.

 

If you do find out how to do it let us know. I don't particularly need it but I'm sure someone somewhere'll find it useful!

I definitely will. If I can figure it out, it will become a photographer-style portfolio website for a good friend of mine.

 

I've recently used this plugin:

 

http://www.infinite-scroll.com/

 

worked really well, so when you reach the bottom of the post it automatically loads the next page underneath it. If I understand what you mean.

That definitely looks interesting, I'll dig into it and see where it takes me. Thanks..

 

Skimming through the site, I chuckled at this line listed under 'disadvantages'

The “footer” of the page will be typically impossible to reach.