Joomla Templates Club 406,261 posts

[internetix Friend internetixJoin date: January 2012Posts: 27Downloads:0Uploads:0 Thanks: 5 Thanked: 4 times in 1 posts]

#181157

Quick question:

Is there any way to “adjust” infinite scroll into loading next set of articles a little sooner ?

Currently the infinite scroll will load the next “page” when the user will hit current page bottom with the scroll bar but this is kinda annoying because you have to wait for the next set of articles be queried and displayed.

Is there anyway to make the infinite scroll load the next set a little sooner ?
Let’s say when the user is at certain procent from current page bottom … or another solution.

This will create a better user experienced since by the time the user will reach current page bottom / set of articles the next one will be already loaded thus obtaining a true infinite scrolling without any delay. 🙂

[seaneo Friend seaneoJoin date: December 2009Posts: 421Downloads:4Uploads:49 Thanks: 244 Thanked: 12 times in 1 posts]

#469047

Totally agree , this would be nice for the user! By the way I think the infinite scroll is called “lazyload” for these purposes.

[internetix Friend internetixJoin date: January 2012Posts: 27Downloads:0Uploads:0 Thanks: 5 Thanked: 4 times in 1 posts]

#469079

Lazyload is a different thing that will delay loading of images (will load only the images in “view range”)

Infinite Scroll provides that “infinite” scrolling effect loading pages in “real time”. (i have a problem with that “real time” because is not actually a “real time” loading experience :laugh: )

I think it can be fine-tuned to load the next page and quering next set of articles a little bit sooner.

There is no point of having the user wait for next “page” if we can “trigger” next-page load a little sooner.

As of now infinite scroll is nice but you have to wait each single time for next page / articles to be loaded which is annoying

Let’s take advantage of the natural “wait” time that user will spend on reading currently loaded articles and load the next page a little sooner so by the time the user will reach the last loaded article, next ones will already be displayed.

[internetix Friend internetixJoin date: January 2012Posts: 27Downloads:0Uploads:0 Thanks: 5 Thanked: 4 times in 1 posts]

#469086

Ok … i found the solution. 😀

Will post it in a little bit after more testing.

[internetix Friend internetixJoin date: January 2012Posts: 27Downloads:0Uploads:0 Thanks: 5 Thanked: 4 times in 1 posts]

#469088

It’s alive ….. :laugh:

After digging into the core of wall javascript files i noticed that the infinite scroll code si found inside wall.js file

So, open wall.js found inside the template “js” folder.

Inside wall.js search for

extraScrollPx: 100,

* should be around line 138

Right after it create a new line with the following parameter

bufferPx: 650,

Adjust the value for your needs (increase it or decrease it) – a higher value means that the infinite scroll will be triggered sooner.

We just need a confirmation from somebody that this is the correct solution.

So far … it works perfect for me. :p

[arucardx Friend arucardxJoin date: July 2010Posts: 346Downloads:0Uploads:10 Thanks: 21 Thanked: 138 times in 104 posts]

#469091

According to infinite scroll’s documentation. That is indeed the correct method.

bufferPx : 40,
// increase this number if you want infscroll to fire quicker
// (a high number means a user will not see the loading message)
// new in 1.2
// default: 40

You can also use this in conjunction if you need to.

extraScrollPx: 50,
// number of additonal pixels that the page will scroll
// (in addition to the height of the loading div)
// animate must be true for this to matter
// default: 150

[arucardx Friend arucardxJoin date: July 2010Posts: 346Downloads:0Uploads:10 Thanks: 21 Thanked: 138 times in 104 posts]

#469528

Just want to add some feedback on this “fix” after some testing. I’m not sure how this bufferpx is calculated on mobile devices, but on the iphone / android phone it’s clearly not working there. But on the desktop & tablet, the bufferpx does works. Could be a landscape vs portrait thing.. or some device limitation.

Anyway, you don’t want to set the value too high because it could cause the tablet to load infinite scroll twice almost simultaneously due to insufficient content height. The result is rather strange when that happens. I’m unclear at this point whether it’s because the emulator is lagging or the script bugged. But I’ve encountered jamming where lazyload simply doesn’t load the images for new articles loaded by infinite scroll and in some cases, I encounter a internal 500 error for that session. (Tablet only, Desktop has no issues but that might be because my resolution is high)

Reducing the bufferpx from my initial value of 1000 to 250 resolves the issue. So for anyone attempting to set a high value for this to imitate pininterest, you might want to look into this strange behavior =)

[xumbrella Friend xumbrellaJoin date: June 2010Posts: 100Downloads:0Uploads:10 Thanks: 6 Thanked: 2 times in 1 posts]

#529785

<em>@arucardx 341593 wrote:</em><blockquote>Just want to add some feedback on this “fix” after some testing. I’m not sure how this bufferpx is calculated on mobile devices, but on the iphone / android phone it’s clearly not working there. But on the desktop & tablet, the bufferpx does works. Could be a landscape vs portrait thing.. or some device limitation.

Anyway, you don’t want to set the value too high because it could cause the tablet to load infinite scroll twice almost simultaneously due to insufficient content height. The result is rather strange when that happens. I’m unclear at this point whether it’s because the emulator is lagging or the script bugged. But I’ve encountered jamming where lazyload simply doesn’t load the images for new articles loaded by infinite scroll and in some cases, I encounter a internal 500 error for that session. (Tablet only, Desktop has no issues but that might be because my resolution is high)

Reducing the bufferpx from my initial value of 1000 to 250 resolves the issue. So for anyone attempting to set a high value for this to imitate pininterest, you might want to look into this strange behavior =)</blockquote>

Hi I was wondering if any one ever resolved the above? I am having issues when the lazy load or infinite scroll is “loading the next set of posts” for me this action is taking around 15 secs which is very high and will result in lost users very quickly. It is also strange that my site (with clear cache) takes around 6 seconds to load. I find this strange because in this instance it loads the whole page plus 10 posts, when lazy load kicks in it is only loading the next 10 posts but is nearly 3 times slower!

I have all my js and css minified, I am fully gzipped and using a CDN and I still experience this lag… could it be to do with a buggy script?

Has any one else experienced, explored this issue?

thanks.

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#530320

I replied you in this thread 🙂

[erickpaulino Friend erickpaulinoJoin date: May 2013Posts: 78Downloads:12Uploads:25 Thanks: 19 Thanked: 3 times in 1 posts]

#538918

Hello,

I am using the auto infinite scroll on JA Magz, and now I am trying to fine tune the load of the set of related articles but changing the parameters of extraScrollPx and bufferPx on templates/ja_magz/js/script.js doesn’t seem to make no difference

The loading is being triggered too soon. I would like to trigger the loading when the user is almost at the end of the page.

Can you help me?

Thank you,

Erick

[Author]

Posts