CODEWITHSUNDEEP
jquery
prismspecs
prismspecs

Reputation: 1489

scrollbar plugin doesn't always work, is there a preload or something I can do?

So here is the site: http://graysonearle.com/newtest/#prettyPhoto/6/ That takes you to a little window with a sidebar housing some images. I'm using lionbar, which is great, but it only works 50% of the time. This is not a typical web problem in my experience. What would cause a script to randomly not function? Is there a tag I can throw in there that makes sure a script is loaded properly? Just reload it until you see it work/not work. Also does it have something to do with the way I am invoking the plugin?

<script>
$('#sidebar').lionbars();
</script>

Just before the /body tag. Would it be more reliable if I did it another way?

Upvotes: 0

Views: 277

Answers (1)

Zuul
Zuul

Reputation: 16269

The presented problem is due to the script being initialized before the images are loaded.

Since the plug-in checks for the "need" of scrollbars:

Line 371 of lionbars.js

// check for vertical scrollbars
if (el.get(0).scrollHeight > el.get(0).clientHeight) {
  addVScroll = true;
  // setVScrollbarWidth(el);
}

You need to make sure the images are loaded before calling the script.

I would suggest a script from a fellow stackoverflow user, that will run the lionbars function after the images are loaded:

GitHub page link for jQuery waitForImages!

e.g., 

$('#sidebar').waitForImages(function() {

    // All images are loaded, initialize the scroll bar plug-in
    $('#sidebar').lionbars();
});

Note:

The reason why the script sometimes works, is because sometimes the images are already cached by the browser and they get placed on the document before the script gets initialized.

Upvotes: 2

Related Questions