修改div的data属性无法更新js-cloudimage-360-view的360旋转视图图片

js-cloudimage-360-view 仅会在页面首次加载时读取一次DOM元素上的data属性完成初始化，后续手动修改data属性不会触发库的重新渲染逻辑，因此页面展示的图片不会发生变化。

1. 调整script加载顺序 #

要先加载js-cloudimage-360-view库，再加载自定义的main.js，才能在业务代码中正常调用库暴露的全局方法，修改index.html中的script顺序如下：

<script src="js-cloudimage-360-view.min.js"></script>
<script src="main.js"></script>

2. 修改main.js逻辑 #

修改完配置参数后，主动调用库的销毁+初始化方法，触发新图片集的加载，修改后的代码如下：

const img_box = document.querySelector('.cloudimage-360')
const btn = document.querySelector('button')

btn.addEventListener('click',()=>{
    // 更新配置参数
    img_box.dataset.folder = 'temp_images/'
    img_box.dataset.filename = '{index}.png'
    // 若新图片集的总张数和原配置的22张不一致，需要同步修改amount参数
    // img_box.dataset.amount = '36'
    
    // 销毁原有实例，重新初始化加载新图片集
    window.CI360.destroy()
    window.CI360.init()
})

如果调用上述方法后存在残留的旧视图DOM，可以在销毁后手动清空容器内容再初始化，代码如下：

btn.addEventListener('click',()=>{
    img_box.dataset.folder = 'temp_images/'
    img_box.dataset.filename = '{index}.png'
    window.CI360.destroy()
    // 清空容器内旧的渲染内容
    img_box.innerHTML = ''
    window.CI360.init()
})

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