添加 Loader 直到 stl 图像加载 PHP答案

【问题标题】：Add Loader until stl image load PHP添加 Loader 直到 stl 图像加载 PHP
【发布时间】：2021-09-28 05:11:57
【问题描述】：

我正在使用 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>

请查看前端截图，

【问题讨论】：

标签： javascript jquery stl

【解决方案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>

【讨论】：

另请注意，我提到了this docs all_loaded_callback 选项。
是的，它工作正常。感谢您的回复。
不客气！