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

[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

[993ti]

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

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 or mod pagespeed.

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.

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

[Bisha]

Does this work with current jQuery version?