$ is undefined but loading jQuery twice fixes it
<p>I have a jQuery preloader that is loaded in my html file:</p>

<pre><code>&lt;script type="text/javascript"&gt;
        jQuery.noConflict()(function($){
            $(".view").preloader();
            $(".flexslider").preloader();
            });
&lt;/script&gt;
</code></pre>

<p>My jquery.preloader.js</p>

<pre><code>// JavaScript Document
$.fn.preloader = function(options){

    var defaults = {
                     delay:200,
                     preload_parent:"a",
                     check_timer:300,
                     ondone:function(){ },
                     oneachload:function(image){  },
                     fadein:500 
                    };

    // variables declaration and precaching images and parent container
     var options = $.extend(defaults, options),
     root = $(this) , images = root.find("img").css({"visibility":"hidden",opacity:0}) ,  timer ,  counter = 0, i=0 , checkFlag = [] , delaySum = options.delay ,

     init = function(){

        timer = setInterval(function(){

            if(counter&gt;=checkFlag.length)
            {
            clearInterval(timer);
            options.ondone();
            return;
            }

            for(i=0;i&lt;images.length;i++)
            {
                if(images[i].complete==true)
                {
                    if(checkFlag[i]==false)
                    {
                        checkFlag[i] = true;
                        options.oneachload(images[i]);
                        counter++;

                        delaySum = delaySum + options.delay;
                    }

                    $(images[i]).css("visibility","visible").delay(delaySum).animate({opacity:1},options.fadein,
                    function(){ $(this).parent().removeClass("preloader");   });




                }
            }

            },options.check_timer) 


         } ;

    images.each(function(){

        if($(this).parent(options.preload_parent).length==0)
        $(this).wrap("&lt;a class='preloader' /&gt;");
        else
        $(this).parent().addClass("preloader");

        checkFlag[i++] = false;


        }); 
    images = $.makeArray(images); 


    var icon = jQuery("&lt;img /&gt;",{

        id : 'loadingicon' ,
        src : '/assets/images/front/spinner.gif'

        }).hide().appendTo("body");



    timer = setInterval(function(){

        if(icon[0].complete==true)
        {
            clearInterval(timer);
            init();
             icon.remove();
            return;
        }

        },100);

    }
</code></pre>

<p>But when I run this, I get a "$ is undefined" and points to this line:</p>

<pre><code>var options = $.extend(defaults, options),
</code></pre>

<p>But here's the weird thing - if I load jQuery 1.7.2 TWICE in my html file - the error goes away, and everything works as expected (including the preloader).</p>

<p><strong>Question:</strong> how do I fix this, so I dont need to load jQuery twice to make this work??</p>
