How to defer loading a javaScript file

[Carla@home]

Hi,

I'm using a jQuery plug-in to filter items on a page. When I use it on a webpage with static content the page reders as it suppose to be.

But with dynamic content the script loads sooner than the page with contents has been rendered. The script calculates the dimension of the web page and it's content.

When viewed on desktop browsers the page will load but it takes a time. If viewed with iOS the page will load with errors like "web page has been reloaded because of an error".

To defer the JS file I've placed the following script at the bottom before the end BODY-tag.

source: How to really defer loading javascript

<script type="text/javascript">
function downloadJSAtOnload() {
var element = document.createElement("script");
element.src = "defer.js";
document.body.appendChild(element);
}
if (window.addEventListener)
window.addEventListener("load", downloadJSAtOnload, false);
else if (window.attachEvent)
window.attachEvent("onload", downloadJSAtOnload);
else window.onload = downloadJSAtOnload;
</script>

The web page rendes with the same results as noted above. (The script is visible as a source and is also placed under the fold of the html-page).

So my question is "how can I make it possible that the plug-in will execute after the page has fully loaded?"

Thanks for any help.

Kind regards,

Carla

[Robert_K__Bell]

Terms like defer and async are most commonly used to control the order that scripts are loaded, but this doesn't seem to be everything you need. Rather, you'll more likely need to:

• Load both scripts (A and B)¹ in any order, but don't immediately run them
• Load a 'control' script, from which you can...
• Run script A, passing a callback² that will notify you when the first round of work has completed, then...
• Run script B, which can now operate safely.

Without knowing the details of the scripts you're using, it's tricky to get more detailed than that.

----

¹ Named A & B for convenience; A might be the 'dynamic content' script, and B could be the 'filter' script.

² Or, use the promise it returns

[Carla@home]

Hi Robert, thanks for your reply. To be more precise I'm using the jQuery plug-in Filterizr (this is similar to Isotope). It recalculates the on the page placed elements after "hitting" a filter. When there's an initial page load of web app items (perhaps they load in sequence)

the plug-in starts calculating the first item and then the next one to the last. I thought loading the script at the end of the document would delay to execute the plug-in, which doesn't. I've found a link that Preloading Images in Parallel with Promises  explains it. I will also have a look at your link.

Krgds Carla

[Liam Dilley]

Hi Carla,

You do not need to worry about Promise, defer loading or anything.

You have your code running on dom initialisation. You can move that to  .load so when document has finished loading to run something, but the plugin has callbacks, delays and initialisation features I can see built into it so you can use that.

Always go to the root of your issue, review it and work your way from there, with anything if you keep solving the issue in front of you and go that way you end up doing solutions more verbose or just not working etc.

[Carla@home]

Hi Liam,

I do agree with you. Indeed I've spend more time on this issue than I should have been. I've optimized the web page a bit, but the issue on iOS still remains. The browser reloads a couple of times and aborts loading. With static data it works fine.

I'm a newbie on JS-matters, so what does it mean "move the code to load"? The above code loads and appends the filter-script to the page. Or is it something else?

Thanks, Carla

[Liam Dilley]

Hi Carla,

Page loading multiple times - Should not be. Should only be one page load and if your reloading it multiple times then there is something wrong with what your doing, if you think you need to load it multiple times then the solution needs a re-think. Think about what you need to do again and form the solution again.

Here is a thread on the difference between document.ready and window load

javascript - What is the difference between $(window).load and $(document).ready? - Stack Overflow

[Carla@home]

Hi Liam,

The page reloads under iOS several times until it aborts. But I've found a plug-in that defers the loading of the images. See DeSandro's imagesLoaded script That stopped iOS from reloading.

I've also found this handy "tool" (an include file) at Web App Filter | Liquid Markup | Adobe Business Catalyst  made by Scott B Reynolds from Thrise. It filters web-app items in the backend rather than through for-loops.

It would be nice though if the web-app module would have a "filter and sort function" something like the BC discovery api. Where you could use "AND" and "AND" and "AND" and "OR" functions, etc. So that the site visitor can make/choose his own filter selections and/or sorting orders.

Extra (added August 1)

I've noticed that when you only use web app-items fields to filter the data, the web-page renders without reloads in iOS.

When you filter data on the web page with a datasource_id as the filter criterium, the web-page will abort (the page won't render) in iOS.