Ensuring CSS is applied before javascript is executed when using jQuery.load

Question

I am working on a website that has a content division that gets loaded dynamically by clicking on links in a navigation bar. The links are bound to jQuery.load(<some HTML page>).

One of my pages that loads into this content window is having a problem. It's a gallery of photos (call it photos.html )that the user can scroll through and it will dynamically load more photos. The way it works is this:

<div id="scrolling_window">
    <div id="container">
        <ul id="list">
            <!-- Content loaded dynamically. -->
        </ul>

        <div id="loader">
            Page Loaded.
        </div>
    </div>
</div>

The scrolling_window is fixed-height (defined in css) and the container holds the images and grows dynamically to contain the pictures.

In javascript I have a function that calculates when the bottom of the scrolling window is near the bottom of the container. If it gets near the end it loads more images. And so on...

Now, if I view the page for this dynamically loaded gallery on it's own (i.e. manually typing in the URL for the page), everything works fine. However, when I view it the intended way (by clicking on the link and having it loaded into the existing page via a call to jQuery.load) then it doesn't work properly.

The problem seems to be that the math in the javascript is based on the sizes of HTML containers that are defined in CSS. I was able to confirm this by doing some testing and moving around my CSS code references with the following results:

When explicitly loading photos.html in a browser it only works if the CSS file is loaded BEFORE the javascript file.
When viewing the page by loading the content with jQuery.load it works if the scrolling_window is styled like <div id="scrolling_window" style="height:150px">
When viewing the page by loading the content with jQuery.load it works if the CSS file is loaded on the main page index.html.

In other words, it seems the CSS file must be loaded before the javascript is executed...

So, my question is... When loading an HTML page into an existing <div> element is it possible to somehow ensure that the CSS referenced on the loaded page is loaded before the javascript is executed?

OmniPotens · Accepted Answer · 2013-06-09 13:25:50Z

1

I think you should set the div to initially load as display:none; then after the CSS then then JavaScript has loaded, you can then activate it.

Setting it to display: none, turns it off from public view but it is loaded. Now after the CSS has loaded, it gets all the necessary styling needed but yet invisible but as soon as all the JavaScript files required are loaded then it starts full function but getting activated by your JavaScript function.

answered Jun 9, 2013 at 13:25

OmniPotens

1,12713 silver badges30 bronze badges

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

2 Comments

Funkytown Over a year ago

I tried it, but it didn't work. The problem is that the dynamic loading of images works as a function of the location of the bottom of the one division inside the other. This depends on them being displayed on the page.

OmniPotens Over a year ago

When explicitly loading photos.html in a browser it only works if the CSS file is loaded BEFORE the javascript file. //MEANING LOAD CSS FIRST, RIGHT? When viewing the page by loading the content with jQuery.load it works if the scrolling_window is styled like <div id="scrolling_window" style="height:150px"> //CODE WORKS AS EXPECTED AT THIS POINT RIGHT? When viewing the page by loading the content with jQuery.load it works if the CSS file is loaded on the main page index.html. //MEANING LOAD CSS IN MAIN PAGE, RIGHT? Do you load same CSS in both index.html and the external page referenced?

Collectives™ on Stack Overflow

Ensuring CSS is applied before javascript is executed when using jQuery.load

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related