添加 Loader 直到 stl 图像加载 PHP

Question

我正在使用 Stl Viewer Javascript 插件在我的网站上显示 3D 图像。 STL 图像的大小约为 50MB。因此，加载需要很多时间。那么在stl图片加载之前添加loader图片是否可行

我正在使用这个插件，https://www.viewstl.com/plugin/

请检查下面我的代码，

<body style="margin:0px;">
        <div id="stl_cont" style="width:600px;height:600px;margin:0; background:#ebebeb; overflow: hidden;"></div>

        <script src="stl_viewer.min.js"></script>       
        <script>
            var stl_viewer=new StlViewer
            (
                document.getElementById("stl_cont"),
                {
                    models:
                    [
                        {filename:"/test/Sienna.stl"}
                    ]
                }
            );
        </script>
        
    </body>

请查看前端截图，

Answer 1

我尝试了下面粘贴的代码，它在我的本地机器上运行良好，请检查并告诉我它是否也适用于您。

P.S 请用适当的 gif 替换图像元素的来源 url 以使其正常工作

<body style="margin: 0px">
    <div
      id="stl_cont"
      style="
        width: 600px;
        height: 600px;
        margin: 0;
        background: #ebebeb;
        overflow: hidden;
      "
    >
      <div
        class="loading"
        style="
          width: 600px;
          height: 600px;
          display: flex;
          align-items: center;
          justify-content: center;
        "
      >
        <img src="./assets/images/icons8-dots-loading.gif" alt="" />
      </div>
    </div>

    <script src="stl_viewer.min.js"></script>
    <script>
      var stl_viewer = new StlViewer(document.getElementById("stl_cont"),
        {
          models: [
            { filename: "/test/Sienna.stl" }
          ],
          all_loaded_callback: function () {
            document.querySelector(".loading").remove();
          },
        }
      );
    </script>
  </body>

添加 Loader 直到 stl 图像加载 PHP

Add Loader until stl image load PHP

javascript

jquery

stl