Show Thread Enhancements - lazy load, load your page faster & save bandwidth

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

  
<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


Thanks to OldSchoolDSL for this suggestion

[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. Attached is the latest version of lazyload raw from git. Same instructions as before.

[RichieBoy67]

Originally Posted by 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. 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]

Originally Posted by 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.

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.