[英]Reload this javascript file after an ajax page load (YITH Infinite Scroll)
我有一个 woocommerce 商店,它有一个 ajax 页面加载导航。 所以用户点击下一页,更多的产品通过ajax加载。
但是,我有一个 javascript 文件,可以在页面加载时处理每个产品的颜色。 但是由于我已经引入了这个 ajax 页面加载,在请求下一个页面后脚本不再加载。
我正在使用 YITH 无限页面滚动。 他们有一个触发器yith_infs_added_elem
,我可以在加载 ajax 后使用它来执行一些代码。
所以我目前有:
jQuery(document).on('yith_infs_added_elem', function() {
});
这是在 ajax 加载后我必须用来运行我的脚本的 YITH 触发器。
但我被困住了。 我已经为其他人阅读了许多其他解决方案,但我似乎无法弄清楚如何重新加载我的 javascript 文件 - /js/javascript/colors/dominant-color-shop.js
。
我通常在页面加载时运行的 javascript 文件是:
jQuery( document ).ready( function( $ ) {
var image = new Image;
var colorThief = new ColorThief();
var bg;
var vibrant_color;
var vibrantText;
$('.post-image-hidden-container').each(function() {
bg = $(this).text();
var rgbs_text = [];
image.onload = function() {
$('.shop-page-item-thumb').each(function() {
var thumb = $(this);
var rgbs = [];
thumb.find('img').each(function() {
var vibrant = new Vibrant(this);
var swatches = vibrant.swatches();
var dominantColor = colorThief.getColor(this);
var productColorPalette = colorThief.getPalette(this, 12);
var productLightestColor = productColorPalette.reduce(function(previousValue, currentValue) {
var currLightNess = (0.2126*currentValue[0] + 0.7152*currentValue[1] + 0.0722*currentValue[2]);
var prevLightNess = (0.2126*previousValue[0] + 0.7152*previousValue[1] + 0.0722*previousValue[2]);
return (prevLightNess < currLightNess) ? currentValue : previousValue;
});
/* Create Shades and Tints of Lightest Color */
var lightShadeRGB = productLightestColor.join();
lightShadeRGB = lightShadeRGB.split(',');
var r = lightShadeRGB[0],
g = lightShadeRGB[1],
b = lightShadeRGB[2];
var rpt = lightShadeRGB[0] - 35,
gpt = lightShadeRGB[1] - 35,
bpt = lightShadeRGB[2] - 35;
var tintDk = 'rgb('+rpt+', '+gpt+', '+bpt+')';
for (var swatch in swatches) {
if (swatches.hasOwnProperty(swatch) && swatches[swatch]) {
rgbs.push(swatches[swatch].getHex());
rgbs_text.push(swatches[swatch].getTitleTextColor());
}
}
vibrant_color = rgbs[0];
vibrant_color_2 = rgbs[1];
darkVibrant = rgbs[2];
darkMuted = rgbs[3];
lightVibrant = rgbs[4];
vibrantText = rgbs_text[0];
vibrantText_2 = rgbs_text[1];
darkVibrantText = rgbs_text[2];
darkMutedText = rgbs_text[3];
lightVibrantText = rgbs_text[4];
thumb.parent().find('.product-bottom-info-container').css({
borderTop: '4px solid ' + vibrant_color
});
thumb.parent().find('.hot-badge').css({
backgroundColor: darkMuted,
color: darkMutedText
});
thumb.parent().find('.mp3-badge').css({
backgroundColor: vibrant_color,
color: vibrantText
});
thumb.parent().find('.mp3-badge-link').css({
color: vibrantText
});
thumb.parent().find('.wav-badge').css({
backgroundColor: vibrant_color_2,
color: vibrantText_2
});
thumb.parent().find('.wav-badge-link').css({
color: vibrantText_2
});
thumb.parent().find('.hot-post-bookmark').css({
color: vibrant_color
});
thumb.parent().find('.the-rating-stars-icons').css({
color: vibrant_color
});
thumb.parent().find('.progress-bar').css({
backgroundColor: vibrant_color
});
});
});
}
image.src = bg;
});
$('#player-toggler-id').css({
backgroundColor: '#181f24'
});
});
它工作正常,直到我请求下一页。 javscript 不再有效。 一旦 yith ajax 加载了这个触发器 - yith_infs_added_elem
,我该如何重新调用这个脚本。
我已经阅读了 .on() .live() (已弃用)等。任何人都可以帮忙吗?
您的功能仅在页面加载时运行...
要稍后再次触发它,您应该将其设为命名函数。
所以脚本保持完全相同,但用function arrangeColors(){
(您可以随意命名)和}
包裹。
然后,在ajax success
回调中,再次调用这个函数。
jQuery( document ).ready( function( $ ) {
function arrangeColors(){ // Make the script a named function
var image = new Image;
var colorThief = new ColorThief();
var bg;
var vibrant_color;
var vibrantText;
$('.post-image-hidden-container').each(function() {
bg = $(this).text();
var rgbs_text = [];
image.onload = function() {
$('.shop-page-item-thumb').each(function() {
var thumb = $(this);
var rgbs = [];
thumb.find('img').each(function() {
var vibrant = new Vibrant(this);
var swatches = vibrant.swatches();
var dominantColor = colorThief.getColor(this);
var productColorPalette = colorThief.getPalette(this, 12);
var productLightestColor = productColorPalette.reduce(function(previousValue, currentValue) {
var currLightNess = (0.2126*currentValue[0] + 0.7152*currentValue[1] + 0.0722*currentValue[2]);
var prevLightNess = (0.2126*previousValue[0] + 0.7152*previousValue[1] + 0.0722*previousValue[2]);
return (prevLightNess < currLightNess) ? currentValue : previousValue;
});
/* Create Shades and Tints of Lightest Color */
var lightShadeRGB = productLightestColor.join();
lightShadeRGB = lightShadeRGB.split(',');
var r = lightShadeRGB[0],
g = lightShadeRGB[1],
b = lightShadeRGB[2];
var rpt = lightShadeRGB[0] - 35,
gpt = lightShadeRGB[1] - 35,
bpt = lightShadeRGB[2] - 35;
var tintDk = 'rgb('+rpt+', '+gpt+', '+bpt+')';
for (var swatch in swatches) {
if (swatches.hasOwnProperty(swatch) && swatches[swatch]) {
rgbs.push(swatches[swatch].getHex());
rgbs_text.push(swatches[swatch].getTitleTextColor());
}
}
vibrant_color = rgbs[0];
vibrant_color_2 = rgbs[1];
darkVibrant = rgbs[2];
darkMuted = rgbs[3];
lightVibrant = rgbs[4];
vibrantText = rgbs_text[0];
vibrantText_2 = rgbs_text[1];
darkVibrantText = rgbs_text[2];
darkMutedText = rgbs_text[3];
lightVibrantText = rgbs_text[4];
thumb.parent().find('.product-bottom-info-container').css({
borderTop: '4px solid ' + vibrant_color
});
thumb.parent().find('.hot-badge').css({
backgroundColor: darkMuted,
color: darkMutedText
});
thumb.parent().find('.mp3-badge').css({
backgroundColor: vibrant_color,
color: vibrantText
});
thumb.parent().find('.mp3-badge-link').css({
color: vibrantText
});
thumb.parent().find('.wav-badge').css({
backgroundColor: vibrant_color_2,
color: vibrantText_2
});
thumb.parent().find('.wav-badge-link').css({
color: vibrantText_2
});
thumb.parent().find('.hot-post-bookmark').css({
color: vibrant_color
});
thumb.parent().find('.the-rating-stars-icons').css({
color: vibrant_color
});
thumb.parent().find('.progress-bar').css({
backgroundColor: vibrant_color
});
});
});
}
image.src = bg;
});
$('#player-toggler-id').css({
backgroundColor: '#181f24'
});
} // Add this closing bracket
// Call the function on load
arrangeColors();
});
我让它现在像这样工作:
<script type="text/javascript">
jQuery(document).ready(function ($) {
loadAnimation();
jQuery(document).on("yith_infs_added_elem", function () {
loadAnimation();
});
function loadAnimation() {
//here put your code for something to doin my case .add-to-cart trigger
}
//here other functions for example flyToElement
});
</script>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.