Major Homeslider improvement found!

[Dennis Heldens]

The homeslider load all images before showing them, and when these are more then 4 images and they're (relative) big, this blocks all (mostly 4) connections from the browser, and because of that the site is loaded slowly: My site with 6 slides was fully loaded after 4,5 seconds. (See first attachment)

 

I've made an improvement, wich gives an big performance boost: Only load the slides when needed, so only 1 connection is used for slide image, the rest of the connections can download the site.

Now the fully loaded time is 2,5 seconds! (See second attachment)

 

The change is very easy:

In homeslider/homeslider.tpl, add the bold code:

 

 

{if $slide.active}

<li><a href="{$slide.url}" title="{$slide.description}"><img src="{if ! isset($notFirst)}{$smarty.const._MODULE_DIR_}/homeslider/images/{$slide.image}{/if}" src_loadonshow="{$smarty.const._MODULE_DIR_}/homeslider/images/{$slide.image}" alt="{$slide.legend}" title="{$slide.description}" height="{$homeslider.height}" width="{$homeslider.width}" /></a></li>

{assign "notFirst" "1"}

{/if}

 

 

In homeslider/js/homeslider.js, add the bold code:

 

$('#homeslider').bxSlider({

infiniteLoop: homeslider_loop,

hideControlOnEnd: true,

pager: true,

autoHover: true,

auto: homeslider_loop,

speed: homeslider_speed,

pause: homeslider_pause,

controls: false,

onBeforeSlide: function(currentSlide, totalSlides, SlideObject){ img = SlideObject.find('img'); if (img.attr("src")=="") { img.attr("src", img.attr('src_loadonshow')); } }

});

Edited January 22, 2013 by Dennis Heldens (see edit history)

[nutxlago]

Thanks Denis for your great improvement,I have just tested it and it workslike a charm!

[nutxlago]

I have a problem with css classes applied by bx-slider.js (no idea on how to open a new thread and I see you are a js expert). I have searched for a solution on forums without success. I need to use 800x600 images (or so) centered on the homeslider window which is wider ( 1170px). The only way I can think of is to apply a new div with no right and left margins around the image so that I can even add a shadow to the image.

 

To make it clear, I want bx-slider.js to create html

<div class="bx-anything"><div class="bx-window">(slide)</div></div>

 

 

I appreciate any help on this topic.Thanks in advance.

[Dreamtheme]

I've made an improvement, wich gives an big performance boost:

 

great finding, you should submit it on PS to improve it.

[WinBoot]

Thank you very much! It lowered my homepage loading time from 5.26s to 3.91s!

Edited February 9, 2013 by WinBoot (see edit history)