jQuery - run code after scripts are loaded

Question

In my header I load scripts (I keep this scripts on my server, original links are added here just for you):

<script src="http://jscrollpane.kelvinluck.com/script/jquery.mousewheel.js"></script>
<script src="http://jscrollpane.kelvinluck.com/script/mwheelIntent.js"></script>
<script src="http://jscrollpane.kelvinluck.com/script/jquery.jscrollpane.min.js">

Then on my footer I'm executing some code:

$(document).ready(function() {
            $(function(){
                $('.scroll-pane').load().jScrollPane();
            });
            numOfPics = $('#gallery-wraper img').size();
            widthOfAll = 0;
            $('#gallery-wraper img').each(function() {
                imgWidth = $(this).width() + 20;
                widthOfAll += imgWidth;
            }); // end of each
            $("#gallery-container").load().css("width",widthOfAll);

            galleryPosition = $(window).height() / 2 - 250;
            $("#gallery").css("margin-top", galleryPosition);
});// end of document.ready()

I want it yo display my images horizontally and put it inside jScrollPane (http://jscrollpane.kelvinluck.com/) But it displays my images horizontally after refresh only (or even after a few page refreshes in chrome). It looks like it tries to execute my code before page content is generated (its a wordpress theme) or before scroll libraries are loaded. What is wrong with my logic here? I'm using document.ready() so why it acts this way?

ace · Accepted Answer · 2011-08-05 14:38:07Z

3

Try calling it after the page loads

$(document).ready(function() {
  $(function(){
      $('.scroll-pane').load().jScrollPane();
  });
  function updateCSS() {
    numOfPics = $('#gallery-wraper img').size();
    widthOfAll = 0;
    $('#gallery-wraper img').each(function() {
        imgWidth = $(this).width() + 20;
        widthOfAll += imgWidth;
    }); // end of each
    $("#gallery-container").load().css("width",widthOfAll);

    galleryPosition = $(window).height() / 2 - 250;
    $("#gallery").css("margin-top", galleryPosition);
  }

  setTimeout('updateCSS()',100);
});// end of document.ready()

answered Aug 5, 2011 at 14:38

ace

7,6513 gold badges25 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

11 Comments

smogg Over a year ago

well... but what if someone has very slow connection. Like if he visit my page from a mobile phone without wi-fi. Then the timer may be to slow and he will see not what he should see...

ace Over a year ago

If the connection is slow, it will still wait for the page to be fully loaded before the timer for 100ms starts.

smogg Over a year ago

Nope, it still doesn't work. I've just had this bug on other computer with slower connection...

ace Over a year ago

What happens on a slower connection? The code runs first before the page is loaded?

ace Over a year ago

By the way Kyle's answer, $(window).load doesn't work for your site? Here is a good link that says when to use load or ready web.enavu.com/daily-tip/…

|

Kyle · Accepted Answer · 2011-08-05 14:42:19Z

2

I am not sure if this is your issue or not, but try the $(window).load event instead of $(document).ready. $(window).load executes after all libraries, images, frames, ect have loaded instead of after your HTML code loading (as your libraries and images may still be loading).

http://4loc.wordpress.com/2009/04/28/documentready-vs-windowload/

answered Aug 5, 2011 at 14:42

Kyle

4,46124 silver badges34 bronze badges

1 Comment

smogg Over a year ago

well, I've read article You gave me, but when I'm trying to use window.load() instead jQuery doesn't load at all and my browser freezes for half a second...

Collectives™ on Stack Overflow

jQuery - run code after scripts are loaded

2 Answers 2

11 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

11 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related