Jump to content

Major Homeslider improvement found!

Dennis Heldens

Recommended Posts

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"}




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



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 by Dennis Heldens (see edit history)
  • Like 2
Link to comment
Share on other sites

  • 3 weeks later...

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.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Create New...