jQuery/Ajax fadeIn() after images/etc have loaded
<p>I have a script that loads pages via ajax for users with custom URLs. For example, a profile is typically located at <a href="http://example.com/users/Dan" rel="nofollow">http://example.com/users/Dan</a> but if a user has a custom URL, say, <a href="http://example.com/DansCustomURL" rel="nofollow">http://example.com/DansCustomURL</a>, then I need to fetch their desired target URL (in this case the user's profile /users/Dan).</p>

<p>Once the HMTL has been fetched and loaded into the <code>data</code> parameter, the content appears immediately, but the CSS styling and some images etc. take a bit longer causing the page to look broken until they are loaded.</p>

<p>Is there anyway to detect when all the elements located in the <code>data</code> variable have been loaded?</p>

<p>My HTML and inline Javascript/jQuery/Ajax is below.</p>

<pre><code>&lt;omni&gt;
&lt;script type="text/javascript" src="assets/js/jquery-2.1.4.min.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript"&gt;
    $(function() {
        var rewritePath = '/users/Dan';
        $.get(rewritePath, function(data,status) {
            $('.hidden-element').append(data).onDataElementsLoad(function() {
                $(this).fadeIn();
            });
        });
    });
&lt;/script&gt;
&lt;div class="hidden-element"&gt;&lt;/div&gt;
&lt;/omni&gt;
</code></pre>

<p>Of course <code>.onDataElementsLoad()</code> is not a real method, but this is what I'm looking to do. </p>

<p>I'm familiar with the <code>waitForImages</code> plugin, but I was hoping to not need another dependency for this (seemingly) simple task.</p>

<p>An example can be seen at <a href="https://merkd.com/url.php?url=dan" rel="nofollow">https://merkd.com/url.php?url=dan</a></p>

<p>I was going to post a fiddle, but it wouldn't allow me to use an external link in that way.</p>

<p>(A preloader will be added in the future, but the issue of preloading for the images in <code>data</code> would still exist.)</p>

<p>I tried the <code>.done()</code> method as instructed by another user in an answer below, but it does not prevent the page from appearing broken before styling/images are loaded. </p>

<p>This is the code I'm using now, and as you can see, the example still page still has a delay in styling/loading elements after the content itself appears.</p>

<pre><code>        var rewritePath = '/u/dan';
        $.get(rewritePath).done(function(data) {
            console.log('loaded');
            $('omni').after(data).remove();
        });
</code></pre>