jQuery bind to call a function when all local domain content is loaded but exclude remote social links from that event

Question

I have a site that I made every page fade nicely when you click any a tag in my pages. The site runs very smoothely with just the local domain html pages. Once I added the social sharing widgets for facebook, google+, linkedin, and twitter, my pages now have much more latency as the window bind events are waiting for the entire page to load.

Is it possible for me to make the bind / load events wait for everything to load just from the local domain or create a list of domains to ignore for my div fade effect methods below called fadeColors(). (the sharing widget i made is collapsed closed and shows right away which is fine because its just a button. I want the sharing widget's contents which are the four remote social urls to load in their own time, but not impede the fade effects I am doing on each page with the div called 'overlay'.

<!-- HTML INDEX PAGE -->

<body>

<div id=overlay>&nbsp;</div>
<script type="text/javascript" src="js/custom.js"></script>

</body>

<!-- This Script is remotely included called custom.js  -->
$(document).ready(function() {  
var $colorsHTML =
'<div class="styleSwitcher">' +
'<a href="#" id="showHideSwitcher"><i class="icon-export"></i></a>' +
'<div id="switcherContent">' +
'<div style="margin-top:25px;height:115px;">';

if(!$('#onePage').length){
    $colorsHTML +=
    '<div class="layoutStyle">' +
    '<div style="padding-left:25px;"><script src="//platform.linkedin.com/in.js" type="text/javascript"> lang: en_US</script><script type="IN/Share" data-url="https://example.com"></script></div>' +
    '<div style="padding-left:25px;padding-bottom:12px" class="fb-share-button" data-href="https://example.com" data-layout="button"></div>' +
    '<div style="padding-left:25px;padding-bottom:2px"><g:plus action="share" annotation="none"></g:plus></div>' +
    '<div style="padding-left:25px;padding-bottom:12px"><a href="https://twitter.com/share" class="twitter-share-button" data-count="none" data-url="https://example.com">Tweet</a><script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?\'http\':\'https\';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+\'://platform.twitter.com/widgets.js\';fjs.parentNode.insertBefore(js,fjs);}}(document, \'script\', \'twitter-wjs\');</script></div>' +
    '</div>';   
}

$("body").append($colorsHTML);  

});


/* ONLOAD and UNLOAD FADED EFFECTS */

// goto local or remote url 
function fadeExit(url) {
    window.location = url;
}

// trap any clicked a tag in the page to exit to the next page
$('a').click(function(event) {
    event.preventDefault();
    var url = $(this).attr('href');
    fadeExit(url);
});

// fade the div overlay that is set above all content
function fadeColors(target) {
    $("#overlay").fadeTo(250, 0, function() {
        $("#overlay").css("display", "none");
    });
}

// Once the page is done loading call our function
$(window).bind("load", function() {
    fadeColors();
})

Answer 1

You have a couple of options:

1) Restructure your code similar to @restlessbit's suggestion in the comments. Include your fade setup code and function definitions in custom.js , but invoke fadeColors() at the end of your ready handler:

$("body").append($colorsHTML);
fadeColors();

and then remove your bind call

// Once the page is done loading call our function
$(window).bind("load", function() {
    fadeColors();
})

2) If that doesn't work as expected, refactor your share link setup code into a separate script, and load it asynchronously. Keep the fadeColors() invocation, and set up the share widget container, in the ready handler. (You mention that the widget container is collapsed to start, so you shouldn't have any issues with content reflows while the guts of the container loads.

Also, a couple of notes:

Your script contains unbalanced div tags in the initial assignment of $colorsHTML .
Consider using on rather than the deprecated bind .
You may need to move your a click handler assignment into the document.ready handler. As it stands, it's being invoked immediately, which may prevent some of your links from being instrumented as you expect. Alternately, use delegated event handling by registering a click listener on a higher level DOM, so no matter when a new a element is created, clicks will be intercepted and properly handled. There are tradeoffs to each approach, so your best option will depend on your use case and the structure of your pages.

jQuery bind to call a function when all local domain content is loaded but exclude remote social links from that event

Question

1 answers

solution1
0 ACCPTED 2015-09-22 15:26:24

jQuery bind to call a function when all local domain content is loaded but exclude remote social links from that event

Question

1 answers

solution1 0 ACCPTED 2015-09-22 15:26:24

solution1
0 ACCPTED 2015-09-22 15:26:24