What am I not doing that I should

I have been trying to debug a click on a thumbnail sized "jump map" initiating scrollTo on a large 8000x6000px full sized map (main_map) but it was not behaving and I become very confused so I went back to basics.

You will see below the setup is very simple, but when the page loads the first time I get the scrollbars as expected, however if I clear cac开发者_运维技巧he with Ctrl F5, thereafter I may or may not get them, and in fact I may or may not get the image appear, (sometimes just an apparently empty space) then after refresing once or twice they reappear. The patten seems random. In fact this behaviour seems the same on a refresh only.

I also discovered that if the main_map displays in part whilst the scrollbars remain invisable, turning on firebug and pressing the "Reload to see all sources" link forces the scrollabrs to reappear.

What am I not seeing?

for your info - Using the simplest method:

$(document).ready(function() {
$(function()
{
    $('.scroll-pane').jScrollPane();
});
});

and the html part:

    <!-- Begin Column main -->
    <div id="column_main">
        <div class="scroll-pane">
            <img id="main_map" src="maps/map.bmp" />
        </div>
    </div>
    <!-- End Column Main-->

---

When you clear the cache and reload the page the images will be re downloaded and offcourse you will see some delay before the images are downloaded. The javascript you have in ready method is redundant use the below.

$(document).ready(function()
{
    $('.scroll-pane').jScrollPane();
});