我收到以下JS错误......
Uncaught TypeError: $loadableItems.ensureLoad is not a function
at Masonry.ensureLoad (Essenza-built.js?ver=4be1690…:1)
at Masonry.<anonymous> (Essenza-built.js?ver=4be1690…:1)
at Object.d [as success] (jquery.js?ver=1.12.4:2)
at i (jquery.js?ver=1.12.4:2)
at Object.fireWith [as resolveWith] (jquery.js?ver=1.12.4:2)
at y (jquery.js?ver=1.12.4:4)
at XMLHttpRequest.c (jquery.js?ver=1.12.4:4)
此JS摘录包含在下面。砌体代码块似乎是个问题。我认为这与变量和函数的范围有关，但我不确定。它也可能与jQuery的加载顺序有关。我真的很感激这个问题的任何帮助。
6: [function(require, module, exports) {
var $ = jQuery;
var Masonry = function($holder, objects_query, maxWidth, minColumns, ajaxFunction, postID) {
$(document).ready($.proxy(function($) {
this.$holder = $holder;
this.$loading_more = $(".loading_more");
this.objects_query = objects_query;
this.postID = postID;
this.$fullDiv = $(".easyBackground");
this.itemsShown = 0;
this.maxWidth = maxWidth;
this.minColumns = minColumns;
this.loadingFurnace = false;
this.firstFurnace = true;
this.hasMore = true;
this.currentNumber = 0;
var holderWidth = this.$holder.width();
var numberOfColumns = this.getNumberColumns(holderWidth);
this.number = numberOfColumns * 7;
this.offset = 0;
this.ajaxFunction = ajaxFunction;
this.loadFurnace();
$(window).resize($.proxy(this.window_resize_timeout, this));
$(window).bind("resize_grid", $.proxy(this.window_resize_timeout, this))
}, this))
};
Masonry.prototype = {
loadFurnace: function() {
if (this.loadingFurnace || !this.hasMore || this.$holder.length == 0) return;
if (!this.firstFurnace) this.$loading_more.show();
var objSend = "frontend=true&number=" + this.number + "&offset=" + this.offset + "&action=" + this.ajaxFunction + "&postId=" + this.postID + "&maxWidth=" + this.maxWidth;
this.loadingFurnace = true;
this.offset += this.number;
if (WP_DEBUG) console.log("Trying to load " + this.number + " items");
var startTime = (new Date).getTime();
$.post(adminAjax, objSend, $.proxy(function(data, textStatus) {
var time = (new Date).getTime();
if (WP_DEBUG) console.log("Time: " + (time - startTime));
var $data = $(data);
this.$holder.append($data);
var number = this.$holder.find(this.objects_query).length - this.currentNumber;
this.currentNumber += number;
if (number < this.number) this.hasMore = false;
var objects = $(this.objects_query).css({
position: "absolute"
});
this.items = new Array;
objects.each($.proxy(function(index, item) {
var $item = $(item);
this.items.push($item)
}, this));
this.ensureLoad();
$(this).trigger("added")
}, this))
},
ensureLoad: function() {
var $loadableItems = this.$holder.find("img, .slider").not(".slider img");
var num = $loadableItems.length;
var counter = 0;
var load_timeout;
if (num > 0) {
load_timeout = setTimeout($.proxy(this.allElementsAreLoaded, this), 2e3);
$loadableItems.ensureLoad($.proxy(function() {
clearTimeout(load_timeout);
counter++;
if (WP_DEBUG) console.log("loaded " + counter + "/" + num);
if (counter == num && this.loadingFurnace) this.allElementsAreLoaded();
else load_timeout = setTimeout($.proxy(this.allElementsAreLoaded, this), 2e3)
}, this))
} else this.allElementsAreLoaded()
},
allElementsAreLoaded: function() {
this.loadingFurnace = false;
this.resize();
this.$holder.find(".slider").trigger("resizeSlider");
this.resize();
this.window_resize_timeout();
this.$loading_more.hide();
this.showItem();
if (this.firstFurnace) {
this.firstFurnace = false;
$(window).unbind("scroll", $.proxy(this.onGridScroll, this));
$(window).scroll($.proxy(this.onGridScroll, this))
}
$(this).trigger("furnaceLoaded")
},
onGridScroll: function() {
if (!this.hasMore) return;
if ($(window).scrollTop() > $(document).height() - $(window).height() - 500) {
this.loadFurnace()
}
},
showItem: function() {
clearTimeout(this.showItemsTimeout);
if (this.items[this.itemsShown] != undefined) {
this.items[this.itemsShown++].addClass("appear");
if (this.itemsShown < this.items.length) this.showItemsTimeout = setTimeout($.proxy(this.showItem, this), 60)
}
},
windowResized: function() {
if (this.items == undefined) return;
if (this.items.length > 0) this.resize()
},
window_resize_timeout: function() {
clearTimeout(this.resize_timeout);
this.resize_timeout = setTimeout($.proxy(this.windowResized, this), 200)
},
getNumberColumns: function(totalWidth) {
var numColumns = 0;
var w = this.maxWidth + 1;
while (w > this.maxWidth) {
numColumns++;
w = totalWidth / numColumns
}
if (numColumns < this.minColumns) numColumns = this.minColumns;
return numColumns
},
changedCategory: function(animateTranslation) {
this.resize(animateTranslation === false ? false : true)
},
resize: function(animateTranslation) {
if (this.loadingFurnace) return;
var AvHeight = this.$fullDiv.height();
var hasScrollbar = false;
if (AvHeight < this.$holder.height()) hasScrollbar = true;
var holderWidth = this.$holder.width();
var numberOfColumns = this.getNumberColumns(holderWidth);
var itemsWidth = Math.ceil(holderWidth / numberOfColumns);
this.number = numberOfColumns * 7;
var columnsHeight = [],
i = numberOfColumns;
while (i--) {
columnsHeight[i] = 0
}
var counter = 0;
$.each(this.items, $.proxy(function(index, item) {
if (item.is(":visible")) {
item.css({
width: itemsWidth + "px"
});
var itemHeight = Math.floor(item.height()) - 1;
var column = counter++;
while (column >= numberOfColumns) column -= numberOfColumns;
var top = columnsHeight[column];
var columnIt = 0;
var max = 0;
while (columnIt < numberOfColumns) {
if (columnsHeight[columnIt] > max) max = columnsHeight[columnIt];
columnIt++
}
var columnIt = 0;
var min = itemHeight / 2;
while (columnIt < numberOfColumns) {
if (max - columnsHeight[columnIt] > min) {
top = columnsHeight[columnIt];
column = columnIt;
min = max - columnsHeight[columnIt]
}
columnIt++
}
if (animateTranslation) item.stop().animate({
left: itemsWidth * column + "px",
top: top + "px"
}, 500, "easeOutExpo");
else item.css({
left: itemsWidth * column + "px",
top: top + "px"
});
if (column == numberOfColumns - 1) item.addClass("last");
else item.removeClass("last");
columnsHeight[column] += itemHeight
}
}, this));
var totalHeight = 0;
for (var i = 0; i < columnsHeight.length; i++)
if (columnsHeight[i] > totalHeight) totalHeight = columnsHeight[i];
this.$holder.css("height", totalHeight + "px");
if (AvHeight >= totalHeight && hasScrollbar) {
var scroll = $(window).scrollTop();
this.$holder.css("height", AvHeight - 1 + "px");
this.resize(animateTranslation);
$(window).scrollTop(scroll);
return
} else if (AvHeight < totalHeight && !hasScrollbar) {
this.resize(animateTranslation)
}
$(this).trigger("gridResize");
this.$holder.find(".social_video").trigger("gridResize");
this.$holder.find(".music_player").trigger("playerResize")
}
};
module.exports = Masonry
}, {}],