Nivo Slider slow to load

pjwhite99

I am just starting out in webdesign im still at college but though i would start my website now so im not into it much yet,

can any1 help why would my Nivo Slider (js) be so slow to load i thought it was ment to be way faster then flash is it not?

Giblet

How large are the images?

pjwhite99

i have 5 the size is not big

- 18k - 23k - 37k - 32k - 23k and 29k

i cant understand why its so slow takes long time to load i have a background image as well so i removed it and its still the same any ideas?

TonyStark

On all browsers? There is/was a known issue with Safari in the past.

http://stackoverflow.com/questions/4789853/css3-box-shadow-causes-scroll-lag-slow-performance-on-safari-5-0-2

Test it on all browers:

• IE
• Chrome
• Safari
• Firefox

It may be just a browser specific issue. You can sanity check the whole thing by installing something like YSlow on Firefox and see if it is something like image size etc that could be your bottleneck.

Procasinator

More often than not, I've found this kind of effects have been faster/smoother in Flash even in most modern browsers. Recent advancements are changing this, but it still holds true for a lot of environments/configurations.

Performance will probably be worst on IE6-IE8. Are these the browsers you are testing in?

Giblet

Procasinator wrote: »

More often than not, I've found this kind of effects have been faster/smoother in Flash even in most modern browsers. Recent advancements are changing this, but it still holds true for a lot of environments/configurations.

Performance will probably be worst on IE6-IE8. Are these the browsers you are testing in?

Probably because people are constantly relying on jQuery and associated libraries to do the work it takes about 20 lines of code to do in pure javascript.

Procasinator

Giblet wrote: »

Probably because people are constantly relying on jQuery and associated libraries to do the work it takes about 20 lines of code to do in pure javascript.

Well, for animated slideshows, etc, I don't think it matters. Transitions, tranforms, fades, etc. are things that no one used in ways that demanded performance in the past. Hell, they often simply weren't used. Now every one is trying to use Canvas, JavaScript, CSS3, etc. to replace Flash overnight. The authoring tools are not there yet, and the browser compatibility is not there yet.

The final code might be 20 lines, but the testing and debugging needed to get the code working it all browsers can be quite the headache for anything non-trivial.

I don't blame people for using libraries to make it easier, because there is a hell of a lot quirks to learn between the various technologies.

pjwhite99

yes its the same in all browsers they all take about the same time to load very slow

so i removed my backgroung image and my side bar image and its still the same very slow so its not the images that are slowing it down


i cant think on what else, there is only 1 way to use the slider is this right? i would not be using it wrong or anything?

TonyStark

pjwhite99 wrote: »

yes its the same in all browsers they all take about the same time to load very slow

so i removed my backgroung image and my side bar image and its still the same very slow so its not the images that are slowing it down


i cant think on what else, there is only 1 way to use the slider is this right? i would not be using it wrong or anything?

Got a demo of it up online anywhere? Easier sometimes when we can see it.

pjwhite99

TonyStark wrote: »

Got a demo of it up online anywhere? Easier sometimes when we can see it.

ya i have a demo of it hare it is http://www.budgetwebdesignireland.com its very slow any ideas?

Giblet

Yep, because you are loading about 500k of images all at the same time from a terrible host. Fix your hosting as it seems to be rubbish. This has nothing to do with javascript. ( I even had javascript turned off )

pjwhite99

Giblet wrote: »

Yep, because you are loading about 500k of images all at the same time from a terrible host. Fix your hosting as it seems to be rubbish. This has nothing to do with javascript. ( I even had javascript turned off )

when you say fix your hosting what do you mean? change to someone else?

i removed my background image and my side bars images its still the same tho or is it the slider images are to big

pjwhite99

Giblet wrote: »

terrible host.

Also can i ask how do you know there a terrible host? can you test there speed or what ?

Giblet

pjwhite99 wrote: »

Also can i ask how do you know there a terrible host? can you test there speed or what ?

Why, are you not having any problems with them and I'm just imagining this thread? I did a check for you, and told you the issue. The host is struggling to send out files when using multiple concurrent connections. It stalls after about 3-4 images, and waits about 9 seconds to respond after that. This isn't even the large background image, it's some of the small 5k gifs too. I looked up the host and found you were using a cheap host. It isn't the image size, it isn't jQuery, it's the fact that the connection is choking when there is a few images loading at the same time.
http://www.budgetwebdesignireland.com/images/line.png

That file took 10 seconds to load, after everything else had loaded. It's under 4k.

donbon

Giblet wrote: »

Probably because people are constantly relying on jQuery and associated libraries to do the work it takes about 20 lines of code to do in pure javascript.

JQuery is quite light, the 'slow loading' is nothing to do with JQuery or even javascript for that matter. The issue is that other assets on the page are slow to load. JQuery is only 'firing' once all the assets on the page have loaded

See:

$(window).load(function() {
    $('#slider').nivoSlider({
        effect: 'random',
        slices: 15,
        boxCols: 8,
        boxRows: 4,
        animSpeed: 500,
        pauseTime: 4000,
        directionNav: false,
        pauseOnHover: false,
    });
});

$(window).load(function() is basically saying once everything else has loaded do this.

I have used Nivio in projects before and it's not slow

Procasinator

donbon wrote: »

JQuery is quite light, the 'slow loading' is nothing to do with JQuery or even javascript for that matter. The issue is that other assets on the page are slow to load. JQuery is only 'firing' once all the assets on the page have loaded

See:

$(window).load(function() {
    $('#slider').nivoSlider({
        effect: 'random',
        slices: 15,
        boxCols: 8,
        boxRows: 4,
        animSpeed: 500,
        pauseTime: 4000,
        directionNav: false,
        pauseOnHover: false,
    });
});

$(window).load(function() is basically saying once everything else has loaded do this.

I have used Nivio in projects before and it's not slow

Could you get away with using $(document).ready. That, or starting the transition on the first image being loaded, and hoping that in 4 seconds (your pause time) the next image is loaded.

window.load is waiting for all resouces to be loaded, rather than just the ones you are concerned with.

Giblet

donbon wrote: »

JQuery is quite light, the 'slow loading' is nothing to do with JQuery or even javascript for that matter. The issue is that other assets on the page are slow to load. JQuery is only 'firing' once all the assets on the page have loaded

See:

$(window).load(function() {
    $('#slider').nivoSlider({
        effect: 'random',
        slices: 15,
        boxCols: 8,
        boxRows: 4,
        animSpeed: 500,
        pauseTime: 4000,
        directionNav: false,
        pauseOnHover: false,
    });
});

$(window).load(function() is basically saying once everything else has loaded do this.

I have used Nivio in projects before and it's not slow

I think I posted that in response above? the comment about jQuery was in response to Procastinator, not related to the problem in the thread. You may notice the first thing I asked about was image size, before getting to the point that the connection to the hosting has problems. And no, jQuery is not light. It's a rather large function call every time you use it actually.

Giblet

Procasinator wrote: »

Could you get away with using $(document).ready. That, or starting the transition on the first image being loaded, and hoping that in 4 seconds (your pause time) the next image is loaded.

window.load is waiting for all resouces to be loaded, rather than just the ones you are concerned with.

If you are just waiting for DOM rather than content, a simple
<script> at the base of the body tag doing the following

(function(){
//do stuff
})();

is fine. Adding superfluous events to the page is bad practice.

Procasinator

Giblet wrote: »

And no, jQuery is not light. It's a rather large function call every time you use it actually.

Are you saying that $() is a large function call? I'm not sure I agree. This is pretty much what gets executed:

https://github.com/jquery/jquery/blob/master/src/core.js#L81

$('body') is quite quick. Wrapping a DOM element is quick quick. Even the performance penalty when using the selectors is not that large considering the convenience over coding it manually (getByXXX vs selectors). Other manipulations (removing, inserting, appending, etc nodes) are really just wrappers on how you would end up doing it anyhow in most cases.

The only thing really that people do with jQuery that they shouldn't is they don't cache the $('XXX') calls. So they might be traversing the DOM multiple times when they could of just kept the reference to the element. This is just bad practice though, rather than something you have to do.

Of course, They could make the same mistake using the built-in methods (or the methods they had to write themselves to match more complicated selectors). Of course they are less likely too as the verbosity of the calls means they'll probably assign the results to variables.

Giblet

Procasinator wrote: »

Are you saying that $() is a large function call? I'm not sure I agree. This is pretty much what gets executed:

https://github.com/jquery/jquery/blob/master/src/core.js#L81

$('body') is quite quick. Wrapping a DOM element is quick quick. Even the performance penalty when using the selectors is not that large considering the convenience over coding it manually (getByXXX vs selectors). Other manipulations (removing, inserting, appending, etc nodes) are really just wrappers on how you would end up doing it anyhow in most cases.

The only thing really that people do with jQuery that they shouldn't is they don't cache the $('XXX') calls. So they might be traversing the DOM multiple times when they could of just kept the reference to the element. This is just bad practice though, rather than something you have to do.

Of course, They could make the same mistake using the built-in methods (or the methods they had to write themselves to match more complicated selectors). Of course they are less likely too as the verbosity of the calls means they'll probably assign the results to variables.

The problem is the vast majority do not use jQuery correctly, and it's compounded exponentially by the use of random plugins to do every minute action. Phones die running this stuff too, not to mention the constant upgrading, and compatibility breaking changes made all the time, such as the recent attr break. I use jQuery all the time, and while it does have it's place, it's making everyone trivialise what they're doing with browser scripting, which is why a lot of sites have horrible issues with freezes etc as the next new fancy plugin does it's magic!

Procasinator

Giblet wrote: »

If you are just waiting for DOM rather than content, a simple
<script> at the base of the body tag doing the following

(function(){
//do stuff
})();

is fine. Adding superfluous events to the page is bad practice.

Yes, if you have full control of where the script will be placed (at the bottom) then you can forego document ready. This however isn't always (at least easily) the case, particularly when using frameworks, CMS solutions, etc.

Procasinator

Giblet wrote: »

The problem is the vast majority do not use jQuery correctly, and it's compounded exponentially by the use of random plugins to do every minute action. Phones die running this stuff too, not to mention the constant upgrading, and compatibility breaking changes made all the time, such as the recent attr break. I use jQuery all the time, and while it does have it's place, it's making everyone trivialise what they're doing with browser scripting, which is why a lot of sites have horrible issues with freezes etc as the next new fancy plugin does it's magic!

This kind of problem applies in nearly any circle you move in IT. Adding another layer simplifies the problem, but allows you to forget (or never know) about the layer below it.

While compatibility problems are always a pain, I much prefer to deal with ones introduced by the jQuery team then the ones that exist and are introduced by the browser vendors.

pjwhite99

thanks for the info anyone know of any good reseller hosting then?

pjwhite99

Giblet wrote: »

terrible host. Fix your hosting as it seems to be rubbish.

Thanks Giblet you were right its my terrible host they are bad! what i done is i have an other website with a host in Ireland.

So i moved the folder of my web design site over to it and guess what loads right away everything at the same time moved it back slow again

thanks for that will have to change

any1 know any good 1s to use that would be great thanks

tufiboy

I was having this problem and found if I changed the JS from $(window).on('load'.. to $(document).ready(... nivo loads almost immediately. I had this issue in FireFox in particular but other browsers were struggling. Not the case since I made the change.