使用QueryLoader插件的TypeError

对于页面加载器，我使用了插件。以下是JS：使用QueryLoader插件的TypeError

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'];

所以，请你能从这个问题帮帮忙：在此先感谢..

来源

2013-03-27 Anand Jaju

不要粘贴所有的代码只是用几句话解释你的问题，并给一些代码示例，最好的做法是设置一个演示。 – 2013-03-27 12:21:30

偏移是一个jQuery方法，在线路 '变种左= $（QueryLoader.selectorPreload）.offset所以（）[ '左']' 如果偏移到左属性未定义的，你不能访问。已包含jquery文件？如果您包含jQuery文件。 '['left']'最好用点符号表示。你确定目标元素存在之前获得抵消？ '$（QueryLoader.selectorPreload）'是正文元素？ – Natalia 2013-03-28 13:40:18

你插件并不是真正的一个。去看the documentation看到更多的细节。

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

首先，你不应该调用对象函数内的对象。 IE：

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

在这里，你得到了它，你可以在控制台中看到您的第一个错误。它应该是：

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

您可以像这样开始调试，直到您的初始错误。

来源

2013-04-09 20:42:51 Shikiryu

使用QueryLoader插件的TypeError

回答

相关问题