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

时间:2016-03-30 16:17:58

标签: javascript jquery ruby-on-rails

我试图加载我的目标网页,但它没有在我的custom.js文件中加载我的.vegas函数。维加斯函数在文件jquery.vegas.js中创建。这似乎是问题所在,那么如何在资产管道中更改我的Rails应用程序中脚本的调用顺序?我可以在application.js文件中更改它的调用顺序吗?

调用.vegas函数的Custom.js文件

(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文件

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

维加斯函数所在的Jquery.vegas.js文件(最底层)

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

1 个答案:

答案 0 :(得分:1)

资产在管道中按字母顺序编译。因此,您可以按照您喜欢的顺序重命名文件以进行编译,也可以删除

//= require_tree .
在您的application.js中

并按您选择的顺序手动要求所有资产。希望这有点帮助。