Foundation 6.4.3中reInit equalizer报错：_init不是元素可用方法

Hey there, let's break down what's happening with your Equalizer plugin after the Foundation upgrade and get it sorted out!

Why Foundation.reInit('equalizer') Throws an Error #

Foundation 6.4+ introduced breaking changes to how plugin initialization and reinitialization work. The old syntax of calling Foundation.reInit('equalizer') (passing just the plugin name) is no longer supported. The error about _init not being an available method pops up because the framework now expects you to target specific elements or existing instances instead of trying to reinitialize the plugin globally by name.

Why new Foundation.Equalizer($('.eq-div')).applyHeight() Causes Lag #

Every time you create a new Foundation.Equalizer instance to update heights, you're likely spawning multiple overlapping instances for the same elements. Each instance runs its own height-calculation logic, leading to redundant DOM computations, memory bloat, and the lag you're experiencing. You're essentially piling up work the browser has to do, which quickly makes it unresponsive.

Step-by-Step Fixes #

1. Correctly Reinitialize Equalizer #

Ditch the old global reinit call and target specific elements or reuse existing instances instead:

• Reinitialize all Equalizer instances:

  // Get all active Equalizer instances
  const equalizerInstances = Foundation.Plugin.getInstances('Equalizer');
  
  // Destroy and reinitialize each one to refresh bindings
  equalizerInstances.forEach(instance => {
    instance.destroy();
    instance.init();
  });
  

• Reinitialize a specific element:

  const $targetEq = $('.eq-div');
  Foundation.reInit($targetEq);
  

  This tells Foundation to reinitialize the Equalizer plugin specifically for that element, properly rebinding any dynamically added content.

2. Fix the Laggy Height Update #

Stop creating new instances every time—instead, retrieve the existing instance and call its methods directly:

const $eqElement = $('.eq-div');
// Get the existing Equalizer instance for the element
const eqInstance = Foundation.Plugin.getInstance($eqElement, 'Equalizer');

if (eqInstance) {
  // Refresh heights without spawning new instances
  eqInstance.applyHeight();
  // Alternatively, use `reflow` to recalculate the entire layout
  // eqInstance.reflow();
} else {
  // Only initialize if no instance exists yet
  new Foundation.Equalizer($eqElement);
}

This way, you're reusing the same instance every time, avoiding the redundant work that causes lag.

Bonus Tip: Optimize for Dynamic Content #

If you're adding elements dynamically, make sure to call the reinit/height update only after the new elements are fully rendered in the DOM. This prevents the plugin from trying to calculate heights for elements that don't exist yet, which can cause unexpected behavior.

内容的提问来源于stack exchange，提问作者OptimusPrime