Bootstrap标签页切换时SVG对象重新加载，如何保持加载状态？

Hey there! Let's fix that annoying SVG reload delay when switching Bootstrap tabs. Since you need to edit the SVG dynamically, <img> is out of the question—but we've got a few solid workarounds to keep your SVG loaded and ready to tweak:

This approach lets you fetch the SVG once upfront, then insert it into your tab pane whenever needed—no repeated network requests, no reload delays.

First, preload the SVG text content when your page loads:

let cachedSvgContent;

// Fetch SVG once on page load
document.addEventListener('DOMContentLoaded', async () => {
  try {
    const response = await fetch('http://127.0.0.1:8000/static/images/card_layout.svg');
    cachedSvgContent = await response.text();
  } catch (err) {
    console.error('Failed to preload SVG:', err);
  }
});

Next, listen for Bootstrap's tab switch event, and inject the cached SVG into the target tab pane (replace your <object> with an empty container first):

<!-- Replace your <object> with this empty container -->
<div class="svg-container test_card"></div>

// Handle tab switch events
document.querySelectorAll('a[data-bs-toggle="tab"]').forEach(tab => {
  tab.addEventListener('shown.bs.tab', (e) => {
    const targetPane = document.querySelector(e.target.getAttribute('href'));
    const svgContainer = targetPane.querySelector('.svg-container');

    // Only inject if SVG isn't already present
    if (!svgContainer.querySelector('svg')) {
      svgContainer.innerHTML = cachedSvgContent;
      
      // Now you can modify the SVG immediately!
      const svgElement = svgContainer.querySelector('svg');
      svgElement.querySelector('#your-target-element').setAttribute('fill', '#ff0000');
    }
  });
});

This gives you full control over the SVG, and since it's cached in memory, switching tabs feels instant.

By default, Bootstrap hides inactive tabs with display: none, which can trigger browsers to "unload" resources like <object> embeds. Instead, we can keep all tab panes in the DOM but move inactive ones off-screen:

Add this custom CSS to override Bootstrap's default styles:

/* Override Bootstrap's tab pane hiding */
.tab-content .tab-pane:not(.active) {
  display: block;
  position: absolute;
  left: -9999px;
  opacity: 0;
  pointer-events: none;
}

.tab-content .tab-pane.active {
  position: relative;
  left: auto;
  opacity: 1;
  pointer-events: auto;
}

Now all your tab content stays loaded in the background—including the <object> SVG. Switching tabs just adjusts the pane's position and opacity, so the SVG appears instantly. This is a quick fix if you don't want to mess with JavaScript, though keep in mind it uses slightly more memory if you have many tabs.

Some browsers handle <iframe> caching better than <object>. You can replace your <object> with an <iframe>:

<iframe class="test_card" src="http://127.0.0.1:8000/static/images/card_layout.svg" frameborder="0">
  Your browser does not support SVGs
</iframe>

To modify the SVG content, access it through the iframe's document:

const svgIframe = document.querySelector('.test_card');
const svgDoc = svgIframe.contentDocument || svgIframe.contentWindow.document;
svgDoc.querySelector('#your-target-element').setAttribute('stroke', '#00ff00');

Note: You might need to tweak CSS to remove default iframe margins/padding, but this works as a drop-in replacement in most cases.

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