未捕获的类型错误：.vegas 不是函数

Question

I'm trying to load my landing page but it is not loading my .vegas function in my custom.js file. The vegas function is created in the file jquery.vegas.js. This seems to be the problem, so how do I change the order of how the scripts are called within my Rails app in the asset pipeline? Can I change the order of how it is called in the application.js file?

Custom.js file where the .vegas function is being called

(function($){

// Preloader     
$(window).load(function() { 
    $('#status').fadeOut();
    $('#preloader').delay(350).fadeOut('slow'); 
    $('body').delay(350).css({'overflow':'visible'});
}); 

$(document).ready(function() {

    // Image background
    $.vegas({
        src:'assets/images/bg1.jpg'
    });

    $.vegas('overlay', {
        src:'assets/images/06.png'
    });

    var countdown =  $('.countdown-time');

    createTimeCicles();

    $(window).on('resize', windowSize);

    function windowSize(){
        countdown.TimeCircles().destroy();
        createTimeCicles();
        countdown.on('webkitAnimationEnd mozAnimationEnd oAnimationEnd animationEnd', function() {
            countdown.removeClass('animated bounceIn');
        });
    }

Application.js file

//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require_tree .

Jquery.vegas.js file where the vegas function resides(At the very bottom)

(function($) {
var $background = $("<img />").addClass("vegas-background"), $overlay =     $("<div />").addClass("vegas-overlay"), $loading = $("<div />").addClass("vegas-loading"), $current = $(), paused = null, backgrounds = [], step = 0, delay = 5e3, walk = function() {}, timer, 
methods = {
    init: function(settings) {
        var options = {
            src: getBackground(),
            align: "center",
            valign: "center",
            fade: 0,
            loading: true,
            load: function() {},
            complete: function() {}
        };
        $.extend(options, $.vegas.defaults.background, settings);
        if (options.loading) {
            loading();
        }
        var $new = $background.clone();
        $new.css({
            position: "fixed",
            left: "0px",
            top: "0px"
        }).bind("load", function() {
            if ($new == $current) {
                return;
            }
            $(window).bind("load resize.vegas", function(e) {
                resize($new, options);
            });
            if ($current.is("img")) {
                $current.stop();
                $new.hide().insertAfter($current).fadeIn(options.fade, function() {
                    $(".vegas-background").not(this).remove();
                    $("body").trigger("vegascomplete", [ this, step - 1 ]);
                    options.complete.apply($new, [ step - 1 ]);
                });
            } else {
                $new.hide().prependTo("body").fadeIn(options.fade, function() {
                    $("body").trigger("vegascomplete", [ this, step - 1 ]);
                    options.complete.apply(this, [ step - 1 ]);
                });
            }
            $current = $new;
            resize($current, options);
            if (options.loading) {
                loaded();
            }
            $("body").trigger("vegasload", [ $current.get(0), step - 1 ]);
            options.load.apply($current.get(0), [ step - 1 ]);
            if (step) {
                $("body").trigger("vegaswalk", [ $current.get(0), step - 1 ]);
                options.walk.apply($current.get(0), [ step - 1 ]);
            }
        }).attr("src", options.src);
        return $.vegas;
    },
    destroy: function(what) {
        if (!what || what == "background") {
            $(".vegas-background, .vegas-loading").remove();
            $(window).unbind("*.vegas");
            $current = $();
        }
        if (!what || what == "overlay") {
            $(".vegas-overlay").remove();
        }
        clearInterval(timer);
        return $.vegas;
    },
    overlay: function(settings) {
        var options = {
            src: null,
            opacity: null
        };
        $.extend(options, $.vegas.defaults.overlay, settings);
        $overlay.remove();
        $overlay.css({
            margin: "0",
            padding: "0",
            position: "fixed",
            left: "0px",
            top: "0px",
            width: "100%",
            height: "100%"
        });
        if (options.src === false) {
            $overlay.css("backgroundImage", "none");
        }
        if (options.src) {
            $overlay.css("backgroundImage", "url(" + options.src + ")");
        }
        if (options.opacity) {
            $overlay.css("opacity", options.opacity);
        }
        $overlay.prependTo("body");
        return $.vegas;
    },
    slideshow: function(settings, keepPause) {
        var options = {
            step: step,
            delay: delay,
            preload: false,
            loading: true,
            backgrounds: backgrounds,
            walk: walk
        };
        $.extend(options, $.vegas.defaults.slideshow, settings);
        if (options.backgrounds != backgrounds) {
            if (!settings.step) {
                options.step = 0;
            }
            if (!settings.walk) {
                options.walk = function() {};
            }
            if (options.preload) {
                $.vegas("preload", options.backgrounds);
            }
        }
        backgrounds = options.backgrounds;
        delay = options.delay;
        step = options.step;
        walk = options.walk;
        clearInterval(timer);
        if (!backgrounds.length) {
            return $.vegas;
        }
        var doSlideshow = function() {
            if (step < 0) {
                step = backgrounds.length - 1;
            }
            if (step >= backgrounds.length || !backgrounds[step - 1]) {
                step = 0;
            }
            var settings = backgrounds[step++];
            settings.walk = options.walk;
            settings.loading = options.loading;
            if (typeof settings.fade == "undefined") {
                settings.fade = options.fade;
            }
            if (settings.fade > options.delay) {
                settings.fade = options.delay;
            }
            $.vegas(settings);
        };
        doSlideshow();
        if (!keepPause) {
            paused = false;
            $("body").trigger("vegasstart", [ $current.get(0), step - 1 ]);
        }
        if (!paused) {
            timer = setInterval(doSlideshow, options.delay);
        }
        return $.vegas;
    },
    next: function() {
        var from = step;
        if (step) {
            $.vegas("slideshow", {
                step: step
            }, true);
            $("body").trigger("vegasnext", [ $current.get(0), step - 1, from - 1 ]);
        }
        return $.vegas;
    },
    previous: function() {
        var from = step;
        if (step) {
            $.vegas("slideshow", {
                step: step - 2
            }, true);
            $("body").trigger("vegasprevious", [ $current.get(0), step - 1, from - 1 ]);
        }
        return $.vegas;
    },
    jump: function(s) {
        var from = step;
        if (step) {
            $.vegas("slideshow", {
                step: s
            }, true);
            $("body").trigger("vegasjump", [ $current.get(0), step - 1, from - 1 ]);
        }
        return $.vegas;
    },
    stop: function() {
        var from = step;
        step = 0;
        paused = null;
        clearInterval(timer);
        $("body").trigger("vegasstop", [ $current.get(0), from - 1 ]);
        return $.vegas;
    },
    pause: function() {
        paused = true;
        clearInterval(timer);
        $("body").trigger("vegaspause", [ $current.get(0), step - 1 ]);
        return $.vegas;
    },
    get: function(what) {
        if (what === null || what == "background") {
            return $current.get(0);
        }
        if (what == "overlay") {
            return $overlay.get(0);
        }
        if (what == "step") {
            return step - 1;
        }
        if (what == "paused") {
            return paused;
        }
    },
    preload: function(backgrounds) {
        var cache = [];
        for (var i in backgrounds) {
            if (backgrounds[i].src) {
                var cacheImage = document.createElement("img");
                cacheImage.src = backgrounds[i].src;
                cache.push(cacheImage);
            }
        }
        return $.vegas;
    }
};
function resize($img, settings) {
    var options = {
        align: "center",
        valign: "center"
    };
    $.extend(options, settings);
    if ($img.height() === 0) {
        $img.load(function() {
            resize($(this), settings);
        });
        return;
    }
    var vp = getViewportSize(), ww = vp.width, wh = vp.height, iw = $img.width(), ih = $img.height(), rw = wh / ww, ri = ih / iw, newWidth, newHeight, newLeft, newTop, properties;
    if (rw > ri) {
        newWidth = wh / ri;
        newHeight = wh;
    } else {
        newWidth = ww;
        newHeight = ww * ri;
    }
    properties = {
        width: newWidth + "px",
        height: newHeight + "px",
        top: "auto",
        bottom: "auto",
        left: "auto",
        right: "auto"
    };
    if (!isNaN(parseInt(options.valign, 10))) {
        properties.top = 0 - (newHeight - wh) / 100 * parseInt(options.valign, 10) + "px";
    } else if (options.valign == "top") {
        properties.top = 0;
    } else if (options.valign == "bottom") {
        properties.bottom = 0;
    } else {
        properties.top = (wh - newHeight) / 2;
    }
    if (!isNaN(parseInt(options.align, 10))) {
        properties.left = 0 - (newWidth - ww) / 100 * parseInt(options.align, 10) + "px";
    } else if (options.align == "left") {
        properties.left = 0;
    } else if (options.align == "right") {
        properties.right = 0;
    } else {
        properties.left = (ww - newWidth) / 2;
    }
    $img.css(properties);
}
function loading() {
    $loading.prependTo("body").fadeIn();
}
function loaded() {
    $loading.fadeOut("fast", function() {
        $(this).remove();
    });
}
function getBackground() {
    if ($("body").css("backgroundImage")) {
        return $("body").css("backgroundImage").replace(/url\("?(.*?)"?\)/i, "$1");
    }
}
function getViewportSize() {
    var elmt = window, prop = "inner";
    if (!("innerWidth" in window)) {
        elmt = document.documentElement || document.body;
        prop = "client";
    }
    return {
        width: elmt[prop + "Width"],
        height: elmt[prop + "Height"]
    };
}
$.vegas = function(method) {
    if (methods[method]) {
        return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
    } else if (typeof method === "object" || !method) {
        return methods.init.apply(this, arguments);
    } else {
        $.error("Method " + method + " does not exist");
    }
};
$.vegas.defaults = {
    background: {},
    slideshow: {},
    overlay: {}
};
})(jQuery);

Answer 1

The assets are compiled alphabetically in the pipeline. So you could either rename the files to compile in the order you like, or you can remove

//= require_tree .

in your application.js and require all of your assets manually in the order you choose. Hopefully that helps a little.