如何通过Weglot仅加载对应语言的JSON文件，避免多动画同时加载？

问题描述 #

我用Weglot给网站实现了英、法、意三种语言的翻译，页面Hero区域对应三种语言各有一个JSON文件变体，期望根据当前显示的语言加载对应的JSON文件。

我原本通过CSS控制不同语言元素的显示隐藏：

/* English */
html:lang(en) .en-element {  
  height: auto !important;
  width: auto !important;
}
html:not([lang="en"]) .en-element {
  height: 0 !important;
  width: 0 !important;
  overflow: hidden !important;
}

/* French */
html:lang(fr) .fr-element { 
  height: auto !important;
  width: auto !important;
}
html:not([lang="fr"]) .fr-element {
  height: 0 !important;
  width: 0 !important;
  overflow: hidden !important;
}

/* Italian */
html:lang(it) .it-element { 
  height: auto !important;
  width: auto !important;
}
html:not([lang="it"]) .it-element {
  height: 0 !important;
  width: 0 !important;
  overflow: hidden !important;
}

但页面初始化时三个JSON文件仍会被全部加载，CSS仅能控制元素的显示状态，无法阻止资源请求。想知道如何实现仅加载当前语言对应的JSON文件，CSS是否可行，或是需要其他方法？

解决方案 #

首先明确：CSS无法阻止资源加载，它只能控制元素渲染后的显示/隐藏，无法干预浏览器的资源请求阶段。要实现按需加载，需要通过JavaScript结合Weglot的语言事件，或服务端预判断来处理。

方法1：前端动态加载（纯前端场景适用） #

1. 页面中仅保留一个空的Hero内容容器：

<div id="hero-container"></div>

2. 获取当前页面语言标识（可通过Weglot API或html标签的lang属性）：

// 优先使用Weglot官方API获取当前语言
const currentLang = Weglot.getCurrentLang() || document.documentElement.lang;

3. 根据语言动态请求对应JSON并渲染内容：

// 建立语言与JSON文件路径的映射
const langJsonMap = {
  en: '/path/to/en-hero.json',
  fr: '/path/to/fr-hero.json',
  it: '/path/to/it-hero.json'
};

// 加载并渲染Hero内容的函数
function loadHeroContent(lang) {
  const jsonUrl = langJsonMap[lang];
  if (!jsonUrl) return;

  fetch(jsonUrl)
    .then(response => response.json())
    .then(data => {
      const heroContainer = document.getElementById('hero-container');
      // 根据你的JSON结构渲染内容，示例假设包含title和description字段
      heroContainer.innerHTML = `
        <h1>${data.title}</h1>
        <p>${data.description}</p>
      `;
    })
    .catch(error => console.error('Hero JSON加载失败:', error));
}

// 页面初始化时加载对应语言的内容
loadHeroContent(currentLang);

// 监听Weglot语言切换事件，切换后重新加载内容
document.addEventListener('weglot:languageChanged', (event) => {
  const newLang = event.detail.newLang;
  loadHeroContent(newLang);
});

方法2：服务端预判断（有服务端的场景适用） #

如果网站采用服务端渲染（如PHP、Node.js），可在页面请求阶段直接判断当前语言（从URL参数、Cookie或Weglot请求头获取），仅输出对应语言的JSON资源引用，或直接将JSON内容嵌入页面，避免浏览器加载多余资源。

以PHP为例：

<?php
// 获取当前语言，示例从Weglot设置的Cookie中读取
$currentLang = $_COOKIE['weglot-lang'] ?? 'en';
// 定义语言与JSON路径的映射
$langJsonMap = [
  'en' => '/path/to/en-hero.json',
  'fr' => '/path/to/fr-hero.json',
  'it' => '/path/to/it-hero.json'
];
$targetJsonUrl = $langJsonMap[$currentLang] ?? $langJsonMap['en'];
?>

<script>
// 直接加载服务端返回的对应语言JSON
fetch('<?php echo $targetJsonUrl; ?>')
  .then(res => res.json())
  .then(data => {
    // 渲染Hero内容
    const heroContainer = document.getElementById('hero-container');
    heroContainer.innerHTML = `<h1>${data.title}</h1><p>${data.description}</p>`;
  });
</script>

注意事项 #

如果之前页面中存在三个对应不同语言的静态元素，需将这些元素删除，否则浏览器仍会提前加载其中的JSON资源。

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