vb.org Archive - Show Thread Enhancements - lazy load, load your page faster & save bandwidth

Page 1 of 2

Show 40 post(s) from this thread on one page

vb.org Archive (https://vborg.vbsupport.ru/index.php)

- vBulletin 4.x Template Modifications (https://vborg.vbsupport.ru/forumdisplay.php?f=246)

- - Show Thread Enhancements - lazy load, load your page faster & save bandwidth (https://vborg.vbsupport.ru/showthread.php?t=259302)

dinodonk

02-22-2011 10:00 PM

lazy load, load your page faster & save bandwidth

1 Attachment(s)

this mod is using jquery lazy load by Mika Tuupola. you can see demo at his site here

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

Code:

  

<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

Juggernaut

02-23-2011 05:57 AM

tagged :D

WEBDosser

02-23-2011 06:12 AM

ditto

Plus	02-23-2011 06:53 AM

Can not save headinclude.

Edit and save headinclude

Quote:

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]

Quote:

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

02-23-2011 07:23 AM

Quote:

Originally Posted by Plus (Post 2165699)

Can not save headinclude.

Edit and save headinclude

[Continue]

vB 4.1.2 bug?

sorry.. typo in if condition. fixed.

Cadellin

02-23-2011 07:48 AM

Tagged

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

dinodonk

02-23-2011 08:34 AM

mm... link fixed

Danasy

02-24-2011 12:47 AM

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

CMSTemplateZ

02-24-2011 04:33 AM

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

Thanks

OldSchoolDSL

02-24-2011 05:09 AM

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:

PHP Code:


		
			
<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.

PHP Code:


		
			
<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

02-24-2011 07:59 AM

thank you
installed ===> under test

Plus	02-24-2011 03:49 PM

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

CMSTemplateZ

02-25-2011 07:22 AM

Just tried this on my Battlefield 3 website, not doing a thing for me :(

Thanks anyway

BadgerDog

02-26-2011 01:02 PM

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

03-02-2011 03:29 AM

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

1320Nation

03-04-2011 07:48 PM

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

03-05-2011 02:25 AM

vbroot/clientscript

Dr.osamA

03-17-2011 03:14 AM

after test :

Excellent

installed + 5 stars
thank you bro

RockstarNetwork

03-19-2011 08:42 PM

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

Kiran-E-Sehar

09-22-2011 05:32 PM

thanks dear

Kolbi

04-16-2012 06:10 PM

Any SEO disadvantages?

scdurwood

05-18-2012 12:36 AM

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

ramesh_umk3

01-11-2013 08:49 AM

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

Add the code in headinclude Template

Code:

<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

993ti

01-12-2013 06:58 PM

Quote:

Originally Posted by ramesh_umk3 (Post 2396181)

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

Add the code in headinclude Template

Code:

<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

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

ramesh_umk3

01-13-2013 05:22 AM

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

YOODA230

01-13-2013 09:26 PM

4.2.3 WORKS GREAT

Azum	07-03-2013 08:51 PM

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

07-04-2013 09:56 AM

Can this mod work on CMS?

final kaoss

07-04-2013 03:45 PM

If it doesn't work then you can do the same thing with google pagespeed service or mod pagespeed.

Quote:

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.

Quote:

Originally Posted by Azum (Post 2431930)

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

09-23-2013 01:15 PM

Does this work with current jQuery version?

RichieBoy67

09-23-2013 10:21 PM

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

09-23-2013 10:28 PM

Have you tried testing your site with web page test or pingdom with the mod running and not running?

ForceHSS

09-24-2013 12:10 PM

Does this work for 4.2.1

ozzy47

09-24-2013 07:16 PM

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

09-25-2013 01:38 AM

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

09-25-2013 12:20 PM

Quote:

Originally Posted by ozzy47 (Post 2447551)

Have you tried testing your site with web page test or pingdom 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

09-25-2013 12:22 PM

Quote:

Originally Posted by OldSchoolDSL (Post 2166135)

PHP Code:


		
			
<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.

PHP Code:


		
			
<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

10-13-2013 06:20 PM

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

Arrogant-One

10-13-2013 08:35 PM

Quote:

Originally Posted by ForceHSS (Post 2447678)

Does this work for 4.2.1

I have 4.1.12 and it is working fantastic!

ForceHSS

10-13-2013 09:06 PM

Quote:

Originally Posted by Arrogant-One (Post 2453026)

I have 4.1.12 and it is working fantastic!

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

All times are GMT. The time now is 06:27 AM.

Page 1 of 2

Show 40 post(s) from this thread on one page

X vBulletin 3.8.12 by vBS Debug Information
Page Generation 0.01399 seconds Memory Usage 1,838KB Queries Executed 10 (?)
More Information
Template Usage: (1)ad_footer_end (1)ad_footer_start (1)ad_header_end (1)ad_header_logo (1)ad_navbar_below (3)bbcode_code_printable (4)bbcode_php_printable (10)bbcode_quote_printable (1)footer (1)gobutton (1)header (1)headinclude (6)option (1)pagenav (1)pagenav_curpage (1)pagenav_pagelink (1)post_thanks_navbar_search (1)printthread (40)printthreadbit (1)spacer_close (1)spacer_open Phrase Groups Available: global postbit showthread	Included Files: ./printthread.php ./global.php ./includes/init.php ./includes/class_core.php ./includes/config.php ./includes/functions.php ./includes/class_hook.php ./includes/modsystem_functions.php ./includes/class_bbcode_alt.php ./includes/class_bbcode.php ./includes/functions_bigthree.php Hooks Called: init_startup init_startup_session_setup_start init_startup_session_setup_complete cache_permissions fetch_threadinfo_query fetch_threadinfo fetch_foruminfo style_fetch cache_templates global_start parse_templates global_setup_complete printthread_start pagenav_page pagenav_complete bbcode_fetch_tags bbcode_create bbcode_parse_start bbcode_parse_complete_precache bbcode_parse_complete printthread_post printthread_complete
Messages: