I want to have the addthis widget available for my users, but I want to lazy load it so that my page loads as quickly as possible. However, after trying it via a script tag and then via my lazy loading method, it appears to only work via the script tag. In the obfuscated code, I see something that looks like it's dependent on the DOMContentLoaded event (at least for Firefox).

Since the DOMContentLoaded event has already fired, the widget doesn't render properly. What to do?

I could just use a script tag (slower)... or could I fire (in a cross browser way) the DOMContentLoaded (or equivalent) event? I have a feeling this may not be possible because I believe that (like jQuery) there are multiple tests of the content ready event, and so multiple simulated events would have to occur.

Nonetheless, this is an interesting problem because I have seen a couple widgets now assume that you are including their stuff via static script tags. It would be nice if they wrote code that was more useful to developers concerned about speed, but until then, is there a work around? And/or are any of my assumptions wrong?

Edit: Because the 1st answer to the question seemed to miss the point of my problem, I wanted to clarify the situation.

This is about a specific problem. I'm not looking for yet another lazy load script or check if some dependencies are loaded script. Specifically this problem deals with

1. external widgets that you do not have control over and may or may not be obfuscated
2. delaying the load of the external widgets until they are needed or at least, til substantially after everything else has been loaded including other deferred elements
3. b/c of the how the widget was written, precludes existing, typical lazy loading paradigms

While it's esoteric, I have seen it happen with a couple widgets - where the widget developers assume that you're just willing to throw in another script tag at the bottom of the page. I'm looking to save those 500-1000 ms** though as numerous studies by Yahoo, Google, and Amazon show it to be important to your user's experience.

**My testing with hammerhead and personal experience indicates that this will be my savings in this case.

I want to have the addthis widget available for my users, but I want to lazy load it so that my page loads as quickly as possible. However, after trying it via a script tag and then via my lazy loading method, it appears to only work via the script tag. In the obfuscated code, I see something that looks like it's dependent on the DOMContentLoaded event (at least for Firefox).

Since the DOMContentLoaded event has already fired, the widget doesn't render properly. What to do?

I could just use a script tag (slower)... or could I fire (in a cross browser way) the DOMContentLoaded (or equivalent) event? I have a feeling this may not be possible because I believe that (like jQuery) there are multiple tests of the content ready event, and so multiple simulated events would have to occur.

Nonetheless, this is an interesting problem because I have seen a couple widgets now assume that you are including their stuff via static script tags. It would be nice if they wrote code that was more useful to developers concerned about speed, but until then, is there a work around? And/or are any of my assumptions wrong?

Edit: Because the 1st answer to the question seemed to miss the point of my problem, I wanted to clarify the situation.

This is about a specific problem. I'm not looking for yet another lazy load script or check if some dependencies are loaded script. Specifically this problem deals with

1. external widgets that you do not have control over and may or may not be obfuscated
2. delaying the load of the external widgets until they are needed or at least, til substantially after everything else has been loaded including other deferred elements
3. b/c of the how the widget was written, precludes existing, typical lazy loading paradigms

While it's esoteric, I have seen it happen with a couple widgets - where the widget developers assume that you're just willing to throw in another script tag at the bottom of the page. I'm looking to save those 500-1000 ms** though as numerous studies by Yahoo, Google, and Amazon show it to be important to your user's experience.

**My testing with hammerhead and personal experience indicates that this will be my savings in this case.

• javascript
• optimization
• widget
• dom-events

4 Answers 4

The simplest solution is to set parameter domready to 1 when embedding addthis script into your page. Here is an example:

<script type="text/javascript" 
src="http://s7.addthis./js/250/addthis_widget.js#username=addthis&domready=1">
</script>

I have tested it on IE, Firefox, Chrome, and Safari, and all worked fine. More information on addthis configuration parameters is available here.

This code solves the problem and saves the loading time that I was looking for.

After reading this post about how most current js libraries implement tests for a dom loaded event. I spent some time with the obfuscated code, and I was able to determine that addthis uses a bination of the mentioned doscroll method, timers, and the DOMContentLoaded event for various browsers. Since only those browsers dependent on the DOMContentloaded event would need the following code anyway:

if( document.createEvent ) {
 var evt = document.createEvent("MutationEvents"); 
 evt.initMutationEvent("DOMContentLoaded", true, true, document, "", "", "", 0); 
 document.dispatchEvent(evt);
}

and the rest depend on timers testing for existence of certain properties, I only had to acmodate this one case to be able to lazy load this external JS content rather than using the static script tags, thus saving the time that I was hoping for. :)

Edit: If the goal is simply to have your other contetn load first, try putting the <script> tags near the bottom of your page. It will still be able to catch the DOMContentLoaded and the content that es before will be loaded before the script.

Original:

in addition to loading on DOMContentLoaded, you could have it load if a certain var is set true. e.g.

var isDOMContentLoaded = false;

document.addEventListener("DOMContentLoaded",function() { isDOMContentLoaded = true; }, false);

then add to the other script file

if (isDOMContentLoaded) loadThisScript();

Edit in response to ments:

Load the script, and run the function that the DOMContentLoaded listener fires. (read the script if you're not sure what function is being called ).

e.g.

var timerID;
var iteration=0;

function checkAndLoad() {
    if (typeof loadThisScript != "undefined") {
        clearInterval(timerID);
        loadThisScript();
    }
    iteration++;
    if (iteration > 59) clearInterval(timerID);
}

var extScript = document.createElement("script");
extScript.setAttribute("src",scriptSrcHere);
document.head.appendChild(extScript);

timerID = setInterval(checkAndLoad,1000);

The above will try once a second for 60 seconds to check if the function you need is available, and, if so, run it

AddThis has a section on how to load their tools asynchronously.

Current 'best' solution:

<script type="text/javascript" src="//s7.addthis./js/300/addthis_widget.js#pubid=[YOUR PROFILE ID]" async="async"></script>