异步脚本加载后渲染页面及动态添加轮播图片不显示问题

我来帮你搞定这两个前端常见的加载与动态DOM问题：

你用到了async属性加载jsonRetrieve.js，这个属性的特性是脚本异步下载，下载完成后立刻执行，完全不考虑DOM解析进度和其他脚本的顺序。这就导致你的页面代码（比如用到items数组的部分）很可能在jsonRetrieve.js还没把数据存入数组时就已经执行了，自然会报undefined。

给你两个靠谱的解决方案：

• 方案1：用自定义事件触发依赖逻辑
  在jsonRetrieve.js的最后（也就是数据存入数组的代码之后），添加一行触发自定义事件的代码：

  // 假设你的数组变量名叫items
  document.dispatchEvent(new CustomEvent('jsonDataReady', { detail: { items: items } }));
  

  然后把页面里依赖items的代码改成监听这个事件：

  document.addEventListener('jsonDataReady', function(e) {
    const items = e.detail.items;
    // 这里写你要执行的逻辑，比如append图片到#carousel
    $('#carousel').append(items[0]);
    // 后续轮播初始化也放这里
  });
  

• 方案2：调整脚本加载属性为defer并控制顺序
  把jsonRetrieve.js的async改成defer，同时确保它的加载顺序在carouselJS.js之前。defer的特性是异步下载，但会在DOM解析完成后按脚本的加载顺序执行，这样就能保证jsonRetrieve.js先执行完，carouselJS.js再运行，不会出现数组未定义的问题。

大部分轮播插件（包括你用的waterwheelCarousel）都是在初始化时扫描当前DOM中的元素，生成轮播的结构和逻辑。你之后用append动态添加的图片，插件根本不知道它们的存在，自然不会把它们加入轮播预览。

解决方法分两种情况：

• 如果还没初始化轮播：先把所有图片添加到#carousel，再初始化轮播。比如结合上面的自定义事件：

  document.addEventListener('jsonDataReady', function(e) {
    const items = e.detail.items;
    // 先把所有图片添加到carousel容器
    items.forEach(imgHtml => {
      $('#carousel').append(imgHtml);
    });
    // 再初始化轮播
    $('#carousel').waterwheelCarousel({
      // 这里填你的轮播配置，比如：
      flankingItems: 3,
      movingToCenter: function ($item) {
        // 你的自定义回调
      }
    });
  });
  

• 如果已经初始化过轮播：查看waterwheelCarousel的文档，调用它的更新/重载方法（如果支持的话）。添加完图片后执行：

  $('#carousel').append(items[0]);
  // 调用重载方法，比如：
  $('#carousel').waterwheelCarousel('reload');
  

另外也可以检查一下浏览器控制台的Network标签，看看图片的src路径是否正确，有没有出现404错误——这也是图片不显示的常见原因。

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