Question

I have a jQuery preloader that is loaded in my html file:

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

My jquery.preloader.js

// 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>=checkFlag.length)
            {
            clearInterval(timer);
            options.ondone();
            return;
            }

            for(i=0;i<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("<a class='preloader' />");
        else
        $(this).parent().addClass("preloader");

        checkFlag[i++] = false;


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


    var icon = jQuery("<img />",{

        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);

    }

But when I run this, I get a “$ is undefined” and points to this line:

var options = $.extend(defaults, options),

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).

Question: how do I fix this, so I dont need to load jQuery twice to make this work??

Answer 1

preloader.js should be in a ready block.

(function($) {
    $.fn.preloader = function(options) {
        // your code here.
    }
})(jQuery);