Calling /../file.js function from inline declared html js gives - ReferenceError: function is not defined
<p>Im trying to call a function declared within my /js/file.js - from an inline js <code>&lt;script&gt;</code> tag'.</p>

<p>What happens is:</p>

<ol>
<li>from /js/file.js I call a function <code>triggeredByJsFile()</code> declared in my inline <code>&lt;script&gt;</code> tag'</li>
<li>then from my inline <code>&lt;script&gt;</code> tag' I end up doing a callback to a function within the /js/file.js - <code>imagesLoaded()</code></li>
</ol>

<p>Im getting an error each time I try to callback to the /js/file.js function: "ReferenceError: imagesLoaded is not defined"</p>

<p>My setup is as following:</p>

<pre><code>&lt;html&gt;
&lt;head&gt;
  &lt;!-- JS file containing the function I want to call --&gt;
  &lt;script src="js/file.js"&gt;&lt;/script&gt;
&lt;/head&gt;

&lt;body&gt;

  &lt;div id="content"&gt;....&lt;/div&gt;


    &lt;script&gt;
function triggeredByJsFile() {
  //does a lot of stuff and
  initiateSomething();
}

function initiateSomething() {
//Reference back to the js file
      imagesLoaded();
}
    &lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p><strong>My /js/file.js</strong></p>

<pre><code>$(document).ready(function ()
{

triggeredByJsFile();

    function imagesLoaded() {
        alert("IMAGES LOADED");
    }

});
</code></pre>

<p><strong>Error that firebug console shows me</strong></p>

<pre><code>ReferenceError: imagesLoaded is not defined
[Break On This Error]   

imagesLoaded();
</code></pre>

<p>Figured I would be able to do this as long as I load my .js file before I do the actually reference / function call at the bottom?</p>
