lazy load, load your page faster & save bandwidth

[dinodonk]

this mod is using jquery lazy load (http://www.appelsiini.net/projects/lazyload/) by Mika Tuupola. you can see demo at his site here (http://www.appelsiini.net/projects/lazyload/enabled.html)

Lazy Load will delay the loading of images outside of viewpoint to make the page load faster. That is, images in the visible part of the web page are only loaded and remaining images are loaded when visitor scrolls down the page, at some times it can even helps to save bandwidth.

in template headinclude, add this code at the bottom


<vb:if condition="THIS_SCRIPT == 'showthread'">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" src="{vb:raw vboptions.bburl}/clientscript/jquery.lazyload.mini.js"></script>
<script type="text/javascript" charset="utf-8">
$(function() {
$(".postbody img").lazyload({placeholder : "{vb:raw vboptions.bburl}/clear.gif", effect: "fadeIn"});
});
</script>
</vb:if>


copy jquery.lazyload.mini.js to your <vb root>/clientscript/ folder


done!!!

pls click install if you like this modification :D


Thanks to OldSchoolDSL for this suggestion (https://vborg.vbsupport.ru/showpost.php?p=2166135&postcount=10)

[Juggernaut]

tagged :D

[WEBDosser]

ditto

[Plus]

Can not save headinclude.

Edit and save headinclude
vBulletin Message
The following error occurred when attempting to evaluate this template:
%1$s
This is likely caused by a malformed conditional statement. It is highly recommended that you fix this error before continuing, but you may continue as-is if you wish.
[Continue]
Edit Conflict
This template was changed by someone else while you were editing it. Your changes have not been saved. Please merge your changes from the lower editor into the current version in the upper editor. When you save this page, only what is in the upper editor will be saved.



vB 4.1.2 bug?

[dinodonk]

Can not save headinclude.

Edit and save headinclude

[Continue]



vB 4.1.2 bug?


sorry.. typo in if condition. fixed.

[Cadellin]

Tagged

The link to the lazyload website is broken by the way.

[dinodonk]

mm... link fixed

[Danasy]

:up: Installed on 4.1.0 ,
works good.
5 stars for you bro.
Thanks for the mod.

[CMSTemplateZ]

Cheers, Great addition for VB4 boards, will try this soon.

Thanks

[OldSchoolDSL]

Installed, although as the original author stated on his site...

http://www.appelsiini.net/projects/lazyload/

He does not believe this will completely work with more modern browser.

Also I would recommended the following....

1) Change the JQuery version number from:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>

To 1.5.0 for a faster load time and improved browser support.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js" type="text/javascript" charset="utf-8"></script>

2) If your community already does load JQuery.... There is no reason to load it more then 1x. So you can be safe to edit it out (remove) JQuery in the authors code.

[Dr.osamA]

thank you
installed ===> under test

[Plus]

Tested on FF (clean cache + firebug): all images (attachment thumbnails) loaded immediately after page load.
Looks good (fade in) but useless :(

[CMSTemplateZ]

Just tried this on my Battlefield 3 (http://battlefield3forums.com/) website, not doing a thing for me :(

Thanks anyway

[BadgerDog]

Installed with thanks ... :)

I'm not sure if it's adding value and I don't have any tools to test it, so some method to be able to use a load test before and after install would be great ...

Appreciate the effort as anything that would help page loading or site optimization for us would be an excellent add-on .. :up:

Regards,
Doug

[Special Pages]

I don't know why but my Admin CP template is messed up after I uploaded the file.

[1320Nation]

copy jquery.lazyload.mini.js to your <vb root>/includes/clientscript/ folder

Where is this location? I'm not able to find a 'clientscript' folder inside of a 'includes' folder. There is both folders, but they are not with in one another as the instructions suggest.

[dinodonk]

vbroot/clientscript

[Dr.osamA]

after test :

Excellent

installed + 5 stars
thank you bro

[RockstarNetwork]

Can this be used on the CMS home page? Working great in forum posts!

[Kiran-E-Sehar]

thanks dear

[Kolbi]

Any SEO disadvantages?

[scdurwood]

having an issue with loading the page on the first unread post....jumps to the end of the thread...

[ramesh_umk3]

Use below code supports almost all vbulletin 3.x.x , 4.x.x

Add the code in headinclude Template

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript" src="http://www.megawrz.com/clientscript/jquery.lazyload.js?v=3"></script>
<script type="text/javascript">
$(function(){
$('img[original-src]').lazyload({threshold: 100});
});
</script>
<noscript>
<style>
img[original-src]{display: none;}
</style>
</noscript>

TESTED Almost 100 HD Mobile Images Loads less than 3 sec in 512kb internet speed
DEMO HERE (http://www.megawrz.com/symbian-s%5E3-theme-wallpaper-skin-icon-fonts/19285-post-your-symbian%5E3-menu-screenshots-here-2.html#post245821)

[993ti]

Use below code supports almost all vbulletin 3.x.x , 4.x.x

Add the code in headinclude Template

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript" src="http://www.megawrz.com/clientscript/jquery.lazyload.js?v=3"></script>
<script type="text/javascript">
$(function(){
$('img[original-src]').lazyload({threshold: 100});
});
</script>
<noscript>
<style>
img[original-src]{display: none;}
</style>
</noscript>

TESTED Almost 100 HD Mobile Images Loads less than 3 sec in 512kb internet speed
DEMO HERE (http://www.megawrz.com/symbian-s%5E3-theme-wallpaper-skin-icon-fonts/19285-post-your-symbian%5E3-menu-screenshots-here-2.html#post245821)

But without www .megawrz .com.....

[ramesh_umk3]

Save .js file and keep in your root folder, nothing gonna happen even you use as it is...

[YOODA230]

4.2.3 WORKS GREAT

[Azum]

Anyone get this to work? Tried the original code and the code by ramesh_umk3 with the updated .js files. Just doesn't seem to do anything in vbulletin.

[inigo]

Can this mod work on CMS?

[final kaoss]

If it doesn't work then you can do the same thing with google pagespeed service (https://developers.google.com/speed/pagespeed/service) or mod pagespeed (https://code.google.com/p/modpagespeed/).



Lazyload Images

Objective

Optimize browser rendering and reduce number of HTTP round-trips by deferring the loading of images which are not in the client's viewport. This rewriter implements the PageSpeed rules for optimizing browser rendering and minimizing round trip times.

Description

The Lazyload Images rewriter defers loading of images until they are visible in the client's viewport. It changes the src attributes of <img> elements on each HTML page to pagespeed_lazy_src. It attaches an onload handler to these elements to determine whether the element is in the client's viewport, and if so, loads it.

For images that are below the fold, this rewriter has two modes of operation:

On page load: Images below the fold are loaded after the onload event is fired. This is done by attaching an event to the onload handler of the page that loads all images that haven't already been loaded.
On scroll: Images below the fold are loaded when they become visible in the client's viewport as the user scrolls down the page. This is done by attaching an event to the onscroll handler of the page that loads newly visible images.
Lazyload Images doesn't defer an img tag if it has the pagespeed_no_defer attribute. Usage:

<img pagespeed_no_defer="" src=.../>
Example

The effect of this rewriter can be observed by comparing the number of requests before and after rewriting. As you scroll down, you will notice that images below the fold are only requested after they become visible in the viewport.

Risks

The computation of each image's position in the viewport may consume additional CPU cycles on the client side. Sites that employ JavaScript libraries to implement lazy-loading may not work properly with this mechanism.

Anyone get this to work? Tried the original code and the code by ramesh_umk3 with the updated .js files. Just doesn't seem to do anything in vbulletin.

[Bisha]

Does this work with current jQuery version?

[RichieBoy67]

I am using 1.5.2... just add it at the end of the jquery url. I have had this installed for some time but I really am not sure if it is doing anything.

[ozzy47]

Have you tried testing your site with web page test (http://www.webpagetest.org/) or pingdom (http://tools.pingdom.com/fpt/) with the mod running and not running?

[ForceHSS]

Does this work for 4.2.1

[ozzy47]

Looking at the code, I don't see why it would not work in 4.2.1, test it and see if you get a better pagespeed. :)

[Justinphx]

The jquery in the script gives a 3x error when looking at the tree on Google Page Speed. Would be interesting to see how this works if a updated jquery is available.

[RichieBoy67]

Have you tried testing your site with web page test (http://www.webpagetest.org/) or pingdom (http://tools.pingdom.com/fpt/) with the mod running and not running?


It did not really show on the speed tests but it does appear to load the images faster. I did not say anything about it to one of my moderators and he mentioned that images were loading very quickly. I did not get any errors. Really though there was a ton of traffic on my site so it is impossible to get an accurate speed test with carrying conditions on a live server. Even if it does work we are talking about a second or less of improvement most likely.

I was planning on using the Google service but my site is set up with a bare domain due to my ssl license and redirecting www to my bare domain will mess things up. The Google service works really well but I just cannot believe they do not support bare domains.

[RichieBoy67]

Installed, although as the original author stated on his site...

http://www.appelsiini.net/projects/lazyload/

He does not believe this will completely work with more modern browser.

Also I would recommended the following....

1) Change the JQuery version number from:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>To 1.5.0 for a faster load time and improved browser support.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js" type="text/javascript" charset="utf-8"></script>2) If your community already does load JQuery.... There is no reason to load it more then 1x. So you can be safe to edit it out (remove) JQuery in the authors code.

I am using 1.5.2 and it seems to work fine with no reports of any errors.

[justunboxing]

Really nice plugin. Already installed and it's loading the forum faster with no doubt. Thank you!

[Arrogant-One]

Does this work for 4.2.1

I have 4.1.12 and it is working fantastic!

[ForceHSS]

I have 4.1.12 and it is working fantastic!

You do know that is not the same version as mine its so old

[Arrogant-One]

You do know that is not the same version as mine its so old

I am not sure what you mean. I had 4.2.2 and had lots of problems. I won't be upgrading anytime soon as a result. My faith in vBulletin has been shaken a little bit.

[ForceHSS]

I am not sure what you mean. I had 4.2.2 and had lots of problems. I won't be upgrading anytime soon as a result. My faith in vBulletin has been shaken a little bit.

Whos talking about 4.2.2 I have 4.2.1

[final kaoss]

Thanks for the mod, using it on 4.2.2 without any issues :)

[DemOnstar]

Installed! 4.2.1

Not sure if it works yet but nothing seems out of place...:up:

[Arrogant-One]

Whos talking about 4.2.2 I have 4.2.1

Oh, I didn't know you had a version of your own. Can you please tell me how to use your's instead? Will I need to uninstall it?

[ForceHSS]

Oh, I didn't know you had a version of your own. Can you please tell me how to use your's instead? Will I need to uninstall it?

lol my vb version is 4.2.1

[smirkley]

Tried to install and test, but no change and isnt operating for me.

vb v4.2.0pl3

tried with variations suggested.

note:am using pretty url's and "showthread" isnt part of the url anymore, tried with what does show on my threads, wondering if that is the problem.

[DemOnstar]

Can somebody please show me the difference or demonstrate the difference between:

Pretty urls
Advanced friendly urls (currently using)
Mod Rewrite Friendly URLs
Basic Friendly URLs

and

Standard URLs

What is best here and why all this choice?

Thank you....

[smirkley]

I shouldnt have used the phrase, "pretty", when all I meant was "Mod Rewrite" urls.
I think the pretty part is a wordpress phrase?

From the help link in acp:
Enabling friendly URLs can increase your site's ranking in search engines and can be useful for users to understand the URL's that they follow.

•Standard URLs:
showthread.php?t=12345

•Basic Friendly URLs:
showthread.php?1234-Thread-Title

•Advanced Friendly URLs:
showthread.php/1234-Thread-Title

•Mod Rewrite Friendly URLs:
threads/1234-Thread-Title

Note: In order to use the Mod Rewrite Friendly URLs the appropriate rewrite rules must be defined for your server.

Mod Rewrite requires htaccess tweaking.

[DemOnstar]

Much appreciated.. Thanks for that.

I will look into Mod Rewrite out of curiosity...

[Arrogant-One]

lol my vb version is 4.2.1

Can I please have a link to your download, I use 4.2.1 now too.

[final kaoss]

The only change you have to make to the code is here. I changed it to 1.9.0

http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js
Can I please have a link to your download, I use 4.2.1 now too.

[@ngel]

I tried to update with this, and it works:

http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js

[DemOnstar]

So, do we need to upload a new script or keep the original script in place?

BTW I put it in clientscript/jquery folder..

[Kolbi]

Using jquery 1.9 you have to edit lazyload see details here: https://gist.github.com/mameier/5099718


// If needed I might have the fixed version on my server...

[tpearl5]

any ideas on getting this working for attachments?
edit: now that I look at this more carefully, I'm not seeing how this would ever work without modifying image tags to include "data-original=" in place of the img src.

[fxdigi-cash]

I don't think this mod works on attachment, but could be only on external pictures.

there is no jquery fade-in effect when loading pages so that means it is not working.

possibly there is a conflict with something else.

[RichieBoy67]

Using jquery 1.9 you have to edit lazyload see details here: https://gist.github.com/mameier/5099718


// If needed I might have the fixed version on my server...

Feel free to send me the fixed version :)

[thetechgenius]

I have a question.

Does this work with HTTPS/SSL? Because my entire forum runs on a SSL Connection, and I know if some things on a page are not running through SSL, users will get a "Partial" secure warning when visiting my site.

However, I know Google has SSL enabled on there servers, so I can just change:


<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"


To This:


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"


But will that work, is that the only URL I have to change to use SSL?

[ezak]

does it affect on SEO and archiving ?

[Firyou]

The latest version of lazyload works with the newest version of jquery for this template edit.


<vb:if condition="THIS_SCRIPT == 'showthread'">
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" src="{vb:raw vboptions.bburl}/clientscript/jquery.lazyload.mini.js"></script>
<script type="text/javascript" charset="utf-8">
$(function() {
$(".postbody img").lazyload({placeholder : "{vb:raw vboptions.bburl}/clear.gif", effect: "fadeIn"});
});
</script>
</vb:if>


This will keep you updated with the latest version of jquery at all times, if you want you could use the google hosted lib one of 2.1.1 here (http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js). Attached is the latest version of lazyload raw from git. Same instructions as before.

[RichieBoy67]

The latest version of lazyload works with the newest version of jquery for this template edit.


<vb:if condition="THIS_SCRIPT == 'showthread'">
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" src="{vb:raw vboptions.bburl}/clientscript/jquery.lazyload.mini.js"></script>
<script type="text/javascript" charset="utf-8">
$(function() {
$(".postbody img").lazyload({placeholder : "{vb:raw vboptions.bburl}/clear.gif", effect: "fadeIn"});
});
</script>
</vb:if>
This will keep you updated with the latest version of jquery at all times, if you want you could use the google hosted lib one of 2.1.1 here (http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js). Attached is the latest version of lazyload raw from git. Same instructions as before.

Actually Vbulletin has this built in..

[Alan_SP]

I just installed version from Firyou (two posts above) and I see that as I scroll through pages with lots of images bandwidth usage rises, i.e. I think images get loaded with scrolling.

Just to comment, as someone posted that this doesn't work.

[friendlymela]

will check it

[final kaoss]

I just installed version from Firyou (two posts above) and I see that as I scroll through pages with lots of images bandwidth usage rises, i.e. I think images get loaded with scrolling.

Just to comment, as someone posted that this doesn't work.

About how much extra bandwidth/cpu resources are used with this mod enabled vs with it disabled? Chances are that it uses so little that the results are negligible.

[Alan_SP]

I think that depends on content you have. If you have many images per page, this could save a lot of bandwidth. But, if all is just plain text, nothing at all.

[friendlymela]

Its really working?

[RichieBoy67]

I do not think you need this anymore unless you have an older version of Vbulletin.

Better to use the htaccess code over at ozzmods.com. There is a bunch of good info there on making your page load faster.