$(window).load和(document).ready [英] $(window).load and (document).ready
问题描述
我正在编辑模板，但对javascript的了解为零.在一页上有一个滑块，要加载该滑块，需要使用(document).ready.
模板的另一页上还有另一个函数$(window).将过滤器加载到页面上的某些元素.
我想制作一个包含以下两个元素的页面:滑块，以及下面带有按钮的元素，以对其进行过滤.
我已经在secon页面上复制了html和滑块的javascript，但是我注意到2个javascript互相残杀":如果两者同时存在，则filering脚本不起作用.如果删除代码以隐藏滑块，则过滤功能将完美运行.我该如何解决探针问题?
下面是代码:
滑块:
//Revolution Slider
var tpj = jQuery;
tpj.noConflict();
tpj(document).ready(function () {
if (tpj.fn.cssOriginal != undefined)
tpj.fn.css = tpj.fn.cssOriginal;
tpj('.fullwidthbanner').revolution(
{
delay: 9000,
startwidth: 1920,
startheight: 649,
onHoverStop: "off", // Stop Banner Timet at Hover on Slide on/off
thumbWidth: 100, // Thumb With and Height and Amount (only if navigation Tyope set to thumb !)
thumbHeight: 50,
thumbAmount: 3,
hideThumbs: 0,
navigationType: "bullet", // bullet, thumb, none
navigationArrows: "none", // nexttobullets, solo (old name verticalcentered), none
navigationStyle: "round", // round,square,navbar,round-old,square-old,navbar-old, or any from the list in the docu (choose between 50+ different item), custom
navigationHAlign: "center", // Vertical Align top,center,bottom
navigationVAlign: "bottom", // Horizontal Align left,center,right
navigationHOffset: 30,
navigationVOffset: 40,
soloArrowLeftHalign: "left",
soloArrowLeftValign: "center",
soloArrowLeftHOffset: 20,
soloArrowLeftVOffset: 0,
soloArrowRightHalign: "right",
soloArrowRightValign: "center",
soloArrowRightHOffset: 20,
soloArrowRightVOffset: 0,
touchenabled: "on", // Enable Swipe Function : on/off
stopAtSlide: -1, // Stop Timer if Slide "x" has been Reached. If stopAfterLoops set to 0, then it stops already in the first Loop at slide X which defined. -1 means do not stop at any slide. stopAfterLoops has no sinn in this case.
stopAfterLoops: -1, // Stop Timer if All slides has been played "x" times. IT will stop at THe slide which is defined via stopAtSlide:x, if set to -1 slide never stop automatic
hideCaptionAtLimit: 0, // It Defines if a caption should be shown under a Screen Resolution ( Basod on The Width of Browser)
hideAllCaptionAtLilmit: 0, // Hide all The Captions if Width of Browser is less then this value
hideSliderAtLimit: 0, // Hide the whole slider, and stop also functions if Width of Browser is less than this value
fullWidth: "on",
shadow: 0 //0 = no Shadow, 1,2,3 = 3 Different Art of Shadows - (No Shadow in Fullwidth Version !)
});
});
过滤功能:
$(window).load(function () {
$(function () {
$.Isotope.prototype._getCenteredMasonryColumns = function () {
this.width = this.element.width();
var parentWidth = this.element.parent().width();
// i.e. options.masonry && options.masonry.columnWidth
var colW = this.options.masonry && this.options.masonry.columnWidth ||
// or use the size of the first item
this.$filteredAtoms.outerWidth(true) ||
// if there's no items, use size of container
parentWidth;
var cols = Math.floor(parentWidth / colW);
cols = Math.max(cols, 1);
// i.e. this.masonry.cols = ....
this.masonry.cols = cols;
// i.e. this.masonry.columnWidth = ...
this.masonry.columnWidth = colW;
};
$.Isotope.prototype._masonryReset = function () {
// layout-specific props
this.masonry = {};
// FIXME shouldn't have to call this again
this._getCenteredMasonryColumns();
var i = this.masonry.cols;
this.masonry.colYs = [];
while (i--) {
this.masonry.colYs.push(0);
}
};
$.Isotope.prototype._masonryResizeChanged = function () {
var prevColCount = this.masonry.cols;
// get updated colCount
this._getCenteredMasonryColumns();
return (this.masonry.cols !== prevColCount);
};
$.Isotope.prototype._masonryGetContainerSize = function () {
var unusedCols = 0,
i = this.masonry.cols;
// count unused columns
while (--i) {
if (this.masonry.colYs[i] !== 0) {
break;
}
unusedCols++;
}
return {
height: Math.max.apply(Math, this.masonry.colYs),
// fit container to columns that have been used;
width: (this.masonry.cols - unusedCols) * this.masonry.columnWidth
};
};
var $container = $('#container'),
$body = $('body'),
colW = 1,
columns = null;
$container.isotope({
// disable window resizing
resizable: false,
masonry: {
columnWidth: colW
}
});
//FILTERING
$('#filters a').click(function () {
var selector = $(this).attr('data-filter');
$container.isotope({
filter: selector
});
return false;
});
});
});
好吧，正在发生的事情是您在第一个文件中调用jQuery.noConflict().该方法使jQuery放弃对$变量的控制(将其返回到先前的值，默认情况下为undefined).在您的第二个文件中，您正在使用$，当然，那时它还没有定义，这就是为什么您的代码无法正常工作的原因.
要么删除对noConflict()的调用，要么将代码包装在第二个文件中:
(function($) {
//...your code here ( $(window).load() and all else)
})(jQuery);
这样，$变量再次在您的代码中定义，但仅在该函数内部定义.但是，我坚持第一个解决方案.如果您使用的是jQuery，则只有在您有充分的理由将$变量用于其他用途时，才应调用.noConflict().请记住，当人们看到$时，他们会想到jQuery.这几乎是一个标准.
I'm editing a template, but I know zero about javascript. On one page there is a slider, to load the slider there is a javascript using (document).ready.
On another page of the template there is another function $(window).load the filters some elements on the page.
I would like to make a page with both this elements: the slider and, below, the elements with the buttons to filter them.
I have copied the html and the javascript of the slider on the secon page, but I have noticed that the 2 javascript "kill each other": if both are present, the filering script does not work. If I remove the code to lod the slider, then the filtering function work perfectly. How can I fix the probem?
here is the code:
Slider:
//Revolution Slider
var tpj = jQuery;
tpj.noConflict();
tpj(document).ready(function () {
if (tpj.fn.cssOriginal != undefined)
tpj.fn.css = tpj.fn.cssOriginal;
tpj('.fullwidthbanner').revolution(
{
delay: 9000,
startwidth: 1920,
startheight: 649,
onHoverStop: "off", // Stop Banner Timet at Hover on Slide on/off
thumbWidth: 100, // Thumb With and Height and Amount (only if navigation Tyope set to thumb !)
thumbHeight: 50,
thumbAmount: 3,
hideThumbs: 0,
navigationType: "bullet", // bullet, thumb, none
navigationArrows: "none", // nexttobullets, solo (old name verticalcentered), none
navigationStyle: "round", // round,square,navbar,round-old,square-old,navbar-old, or any from the list in the docu (choose between 50+ different item), custom
navigationHAlign: "center", // Vertical Align top,center,bottom
navigationVAlign: "bottom", // Horizontal Align left,center,right
navigationHOffset: 30,
navigationVOffset: 40,
soloArrowLeftHalign: "left",
soloArrowLeftValign: "center",
soloArrowLeftHOffset: 20,
soloArrowLeftVOffset: 0,
soloArrowRightHalign: "right",
soloArrowRightValign: "center",
soloArrowRightHOffset: 20,
soloArrowRightVOffset: 0,
touchenabled: "on", // Enable Swipe Function : on/off
stopAtSlide: -1, // Stop Timer if Slide "x" has been Reached. If stopAfterLoops set to 0, then it stops already in the first Loop at slide X which defined. -1 means do not stop at any slide. stopAfterLoops has no sinn in this case.
stopAfterLoops: -1, // Stop Timer if All slides has been played "x" times. IT will stop at THe slide which is defined via stopAtSlide:x, if set to -1 slide never stop automatic
hideCaptionAtLimit: 0, // It Defines if a caption should be shown under a Screen Resolution ( Basod on The Width of Browser)
hideAllCaptionAtLilmit: 0, // Hide all The Captions if Width of Browser is less then this value
hideSliderAtLimit: 0, // Hide the whole slider, and stop also functions if Width of Browser is less than this value
fullWidth: "on",
shadow: 0 //0 = no Shadow, 1,2,3 = 3 Different Art of Shadows - (No Shadow in Fullwidth Version !)
});
});
Filtering function:
$(window).load(function () {
$(function () {
$.Isotope.prototype._getCenteredMasonryColumns = function () {
this.width = this.element.width();
var parentWidth = this.element.parent().width();
// i.e. options.masonry && options.masonry.columnWidth
var colW = this.options.masonry && this.options.masonry.columnWidth ||
// or use the size of the first item
this.$filteredAtoms.outerWidth(true) ||
// if there's no items, use size of container
parentWidth;
var cols = Math.floor(parentWidth / colW);
cols = Math.max(cols, 1);
// i.e. this.masonry.cols = ....
this.masonry.cols = cols;
// i.e. this.masonry.columnWidth = ...
this.masonry.columnWidth = colW;
};
$.Isotope.prototype._masonryReset = function () {
// layout-specific props
this.masonry = {};
// FIXME shouldn't have to call this again
this._getCenteredMasonryColumns();
var i = this.masonry.cols;
this.masonry.colYs = [];
while (i--) {
this.masonry.colYs.push(0);
}
};
$.Isotope.prototype._masonryResizeChanged = function () {
var prevColCount = this.masonry.cols;
// get updated colCount
this._getCenteredMasonryColumns();
return (this.masonry.cols !== prevColCount);
};
$.Isotope.prototype._masonryGetContainerSize = function () {
var unusedCols = 0,
i = this.masonry.cols;
// count unused columns
while (--i) {
if (this.masonry.colYs[i] !== 0) {
break;
}
unusedCols++;
}
return {
height: Math.max.apply(Math, this.masonry.colYs),
// fit container to columns that have been used;
width: (this.masonry.cols - unusedCols) * this.masonry.columnWidth
};
};
var $container = $('#container'),
$body = $('body'),
colW = 1,
columns = null;
$container.isotope({
// disable window resizing
resizable: false,
masonry: {
columnWidth: colW
}
});
//FILTERING
$('#filters a').click(function () {
var selector = $(this).attr('data-filter');
$container.isotope({
filter: selector
});
return false;
});
});
});
Well, what's happening is that you're calling jQuery.noConflict() in the first file. That method makes jQuery relinquish control of the $ variable (returns it to previous value, which, by default, is undefined). In your second file you are using $ which, of course, is undefined by then, and that's why your code does not work.
Either remove the call to noConflict() or wrap the code in the second file in this:
(function($) {
//...your code here ( $(window).load() and all else)
})(jQuery);
This way, the $ variable is again defined in your code, but only inside that function. However, I'd stick with the first solution. If you're using jQuery, calling .noConflict() should be done only if you have very good reasons to use the $ variable for another purpose. Keep in mind that when people sees $ they will think about jQuery. It's almost a standard.
这篇关于$(window).load和(document).ready的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
