分享
查看: 1094|回复: 0

[分享] 给低代码添加启动界面(loading页)

[复制链接]

给低代码添加启动界面(loading页)

发表于 2023-9-15 17:31:26 来自 分享 只看大图 阅读模式 倒序浏览
zzv_icon1094 zzr_icon0 查看全部
本帖最后由 18979425409 于 2023-12-4 10:09 编辑

通过ajax的方式给低代码添加启动界面。

步骤:
1.制作html的启动界面

2.在低代码中添加启动界面
给低代码添加启动界面(loading页)

3.当场景加载完成之后,隐藏启动界面
给低代码添加启动界面(loading页)

4.整体代码
  1. // 加载场景代码
  2. var app = new THING.App({
  3.     url: "/api/scene/508bf8b7220b917648d3b86c", // 场景地址
  4.     background: '#000000',
  5.     env: 'Seaside',
  6. });
  7. // ajax请求文件
  8. $.ajax({
  9.     url: '/uploads/wechat/703071/file/启动界面/index.html',  //启动界面地址
  10.     type: 'get',
  11.     dataType: 'text',
  12.     success: function (data) {
  13.         // 添加启动界面到页面中
  14.         $('.div2d').append(data);
  15.         // 查看当前场景加载进度
  16.         app.on(THING.EventType.Progress, function (ev) {
  17.             // 得到0-100的整数
  18.             var num = Math.trunc(ev.progress * 100)
  19.             console.log(num)
  20.         })

  21.     }
  22. })

  23. app.on('load', function () {
  24.     console.log("资源加载完成,隐藏启动界面")
  25.     // 启动界面的最外面元素的id为loadingDiv
  26.     document.getElementById("loadingDiv").style.display = "none";
  27. })
复制代码



avatar
游客~
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

130700ppkpl8x3t7tt1b1t