javascript - 使用 QueryLoader 插件时出现类型错误

Question

对于页面加载器，我使用了该插件。以下是js:

var QueryLoader = {
    overlay: "",
    loadBar: "",
    preloader: "",
    items: new Array(),
    doneStatus: 0,
    doneNow: 0,
    selectorPreload: "body",
    ieLoadFixTime: 2000,
    ieTimeout: "",

    init: function() {
        if (navigator.userAgent.match(/MSIE (\d+(?:\.\d+)+(?:b\d*)?)/) == "MSIE 6.0,6.0") {
            //break if IE6          
            return false;
        }
        if (QueryLoader.selectorPreload == "body") {
            QueryLoader.spawnLoader();
            QueryLoader.getImages(QueryLoader.selectorPreload);
            QueryLoader.createPreloading();
        } else {
            $(document).ready(function() {
                QueryLoader.spawnLoader();
                QueryLoader.getImages(QueryLoader.selectorPreload);
                QueryLoader.createPreloading();
            });
        }

        //help IE drown if it is trying to die :)
        QueryLoader.ieTimeout = setTimeout("QueryLoader.ieLoadFix()", QueryLoader.ieLoadFixTime);
    },

    ieLoadFix: function() {
        var ie = navigator.userAgent.match(/MSIE (\d+(?:\.\d+)+(?:b\d*)?)/);
        if (ie[0].match("MSIE")) {
            while ((100 / QueryLoader.doneStatus) * QueryLoader.doneNow < 100) {
                QueryLoader.imgCallback();
            }
        }
    },

    imgCallback: function() {
        QueryLoader.doneNow ++;
        QueryLoader.animateLoader();
    },

    getImages: function(selector) {
        var everything = $(selector).find("*:not(script)").each(function() {
            var url = "";

            if ($(this).css("background-image") != "none") {
                var url = $(this).css("background-image");
            } else if (typeof($(this).attr("src")) != "undefined" && $(this).attr("tagName").toLowerCase() == "img") {
                var url = $(this).attr("src");
            }

            url = url.replace("url(\"", "");
            url = url.replace("url(", "");
            url = url.replace("\")", "");
            url = url.replace(")", "");

            if (url.length > 0) {
                QueryLoader.items.push(url);
            }
        });
    },

    createPreloading: function() {
        QueryLoader.preloader = $("<div></div>").appendTo(QueryLoader.selectorPreload);
        $(QueryLoader.preloader).css({
            height:     "0px",
            width:      "0px",
            overflow:   "hidden"
        });

        var length = QueryLoader.items.length; 
        QueryLoader.doneStatus = length;

        for (var i = 0; i < length; i++) {
            var imgLoad = $("<img></img>");
            $(imgLoad).attr("src", QueryLoader.items[i]);
            $(imgLoad).unbind("load");
            $(imgLoad).bind("load", function() {
                QueryLoader.imgCallback();
            });
            $(imgLoad).appendTo($(QueryLoader.preloader));
        }
    },

    spawnLoader: function() {
        if (QueryLoader.selectorPreload == "body") {
            var height = $(window).height();
            var width = $(window).width();
            var position = "fixed";
        } else {
            var height = $(QueryLoader.selectorPreload).outerHeight();
            var width = $(QueryLoader.selectorPreload).outerWidth();
            var position = "absolute";
        }
        var left = $(QueryLoader.selectorPreload).offset()['left'];
        var top = $(QueryLoader.selectorPreload).offset()['top'];

        QueryLoader.overlay = $("<div></div>").appendTo($(QueryLoader.selectorPreload));
        $(QueryLoader.overlay).addClass("QOverlay");
        $(QueryLoader.overlay).css({
            position: position,
            top: top,
            left: left,
            width: width + "px",
            height: height + "px"
        });

        QueryLoader.loadBar = $("<div></div>").appendTo($(QueryLoader.overlay));
        $(QueryLoader.loadBar).addClass("QLoader");

        $(QueryLoader.loadBar).css({
            position: "relative",
            top: "50%",
            width: "0%"
        });
    },

    animateLoader: function() {
        var perc = (100 / QueryLoader.doneStatus) * QueryLoader.doneNow;
        if (perc > 99) {
            $(QueryLoader.loadBar).stop().animate({
                width: perc + "%"
            }, 500, "linear", function() { 
                QueryLoader.doneLoad();
            });
        } else {
            $(QueryLoader.loadBar).stop().animate({
                width: perc + "%"
            }, 500, "linear", function() { });
        }
    },

    doneLoad: function() {
        //prevent IE from calling the fix
        clearTimeout(QueryLoader.ieTimeout);

        //determine the height of the preloader for the effect
        if (QueryLoader.selectorPreload == "body") {
            var height = $(window).height();
        } else {
            var height = $(QueryLoader.selectorPreload).outerHeight();
        }

        //The end animation, adjust to your likings
        $(QueryLoader.loadBar).animate({
            height: height + "px",
            top: 0
        }, 500, "linear", function() {
            $(QueryLoader.overlay).fadeOut(800);
            $(QueryLoader.preloader).remove();
        });
    }
}

在我的 html 文件中，我使用了以下 Javascript:

<script type='text/javascript'>
    QueryLoader.init();
</script>

CSS如下:

.QOverlay {
    background-color: #000000;
    z-index: 9999;
}

.QLoader {
    background-color: #CCCCCC;
    height: 1px;
}

我用这个作为简单的例子，它效果很好。但是当我在我的网站上使用它时，它在 js 文件中给出错误，如下所示:

TypeError: $(...).offset(...) is undefined

var left = $(QueryLoader.selectorPreload).offset()['left'];

请您帮忙解决这个问题:提前致谢..

Answer 1

你的插件并不是真正的插件。去看the documentation查看更多详细信息。

无论如何，即使它不是一个插件，它也可以使用一些 jQuery 函数作为一个对象工作。

首先，您不应该在对象函数内调用该对象。浏览器:

QueryLoader.ieTimeout = setTimeout("QueryLoader.ieLoadFix()", QueryLoader.ieLoadFixTime);

在这里，您遇到了第一个错误，您可以在控制台中看到该错误。应该是:

this.ieTimeout = setTimeout(this.ieLoadFix, this.ieLoadFixTime);

您可以像这样开始调试，直到此处出现初始错误。