如何添加加载“微调器”答案

【问题标题】：how to add a loading "spinner"如何添加加载“微调器”
【发布时间】：2023-03-25 12:45:01
【问题描述】：

我有一些非常简单的 js（我还在学习），它基本上读取表单的元素并创建一个 url 字符串，该字符串传递给成像服务器，然后再渲染图像。

var imgURL = "site.com/path/to/image";
var product = "BirthdayCard_End" + "?&";
var page = 2;
var format;
var data;

function setPage(inputID)
    {
        page = inputID;
        setJPG();
    }

function FormValues()
    {
        var str = '';
        var elem = document.getElementById('form1').elements;
        for(var i = 0; i < elem.length; i++)
        {
            str += "$" + elem[i].id + "=" + elem[i].value + "&";
        }
        data = str;         
    }

function genPDF()
    {
        var format = "fmt=pdf&mediaMargin=48&bleedMargin=48&printerMark=1,1,1,1,1,Illustrator,.25,1";
        fullURL = imgURL + product + data + format;
        window.open(fullURL);       

    }

function setJPG()
    {
        FormValues();
        var format = "imageRes=200&fmt=jpg&wid=550&page=" + page;
        fullURL = imgURL + product + data + format;
        document.getElementById('lblValues').innerHTML = fullURL;
        document.getElementById('image').src = fullURL;
    }

我正在尝试弄清楚如何显示这样的简单加载程序 (http://fgnass.github.com/spin.js/#v1.2.5)。如何在 setJPG() 函数中添加一些内容，以便它在每次初始化时弹出加载器，然后在加载图像后消失？

【问题讨论】：

你已经添加了jquery的标签但是你真的在使用jquery，你想要一个jquery的答案吗？
jquery 或者只是 javascript 都可以。看来这个插件可以同时做这两个。

标签： javascript jquery

【解决方案1】：

你们让这种方式变得比它需要的更复杂。将你的图片放在一个 div 中，并将 div 的背景设置为动画 gif。

<div style="background-image: url('spinner.gif')"><img src='bigImage.jpg'></div>

根本不需要使用任何 JS，图像将简单地加载到背景微调器上。

【讨论】：

【解决方案2】：

建议的解决方案

对于图像，使用“加载微调器”是有问题的。见下文。

首先发送低分辨率（也考虑黑白）图像，而不是微调器。 This SO question tells how.

图片加载微调器

在您等待显示图像时显示微调器的一个问题是，当图像加载时，浏览器无法可靠地告诉您的 JS。

如果它不触发，那么你将永远看着旋转器......

查看jQuery load event 的文档--

与图像一起使用时加载事件的注意事项

开发人员尝试使用 .load() 快捷方式解决的一个常见挑战是在图像（或图像集合）完全加载后执行一个函数。应该注意几个已知的警告。它们是：

它不能始终如一地工作，也不能可靠地跨浏览器

如果图像 src 设置为与以前相同的 src，它不会在 WebKit 中正确触发

它没有正确地冒泡 DOM 树

可以停止为已经存在于浏览器缓存中的图像触发

【讨论】：

微调器的原因只是为了让客户知道图像正在更新。渲染的图像实际上非常快。每次调用 setJPG 时，最好只显示 x 量秒的微调器，只是为了给出“印象”。你怎么看？
是的，显示“工作中...”的定时弹出窗口很有用。我已经在我的一些应用程序上做到了。但是，如果整个事情非常快，那么首先要仔细考虑为什么需要它。您还可以看到出现然后消失的横幅类型消息“已更新”。 Google 在 gmail 和其他地方使用这种类型的反馈。

【解决方案3】：

最简单的方法是在另一个上创建两个 div。一个带有微调器的 div 用内容覆盖 div，然后在页面完成加载时显示带有内容的 div。

在此示例中，我在 window.load 上使用它，因此您可能需要将事件修改为加载图像。其余的应该可以正常工作。

CSS：

#preloader {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background:white;
opacity:0.3;
z-index:2;
}
#spinner_container {
position:absolute;
width:100%;
top: 50%;
left:0px;
height:1px;
overflow:visible;
opacity: 1;
background: transparent;
}
#spinner {
width: 31px;
height:31px;
margin-left:-15px;
position:absolute;
top:-15px;
left:50%;
display:block;
}

HTML

<div id="preloader">
<div id="spinner_container">
<img id="spinner" src="/content/images/spinner_squares_circle.gif" alt="" />
</div>
</div>
<div id="wrapper">
content
</div>

jQuery

$(window).load(function(){

    $('#preloader').fadeOut(100, function() {
               $('body').css('overflow','auto');
               $(this).remove();
    });
});

【讨论】：

OP 想知道图像何时加载。所以需要使用负载。但是，应该在图像元素上使用负载。 Plus 可能并不总是开火而使旋转器保持运转。见load event docs
抱歉，略过您的回答。我更多地考虑让文档准备好隐藏加载图形和在需要时调用它的函数，我的错。
不应该将load 事件处理程序附加到图像而不是页面吗？我们不知道何时会调用 setJPG - 如果它是对用户操作的响应，它可能会在页面加载几分钟后调用。

【解决方案4】：

如果你使用Spectre css，你可以添加这个div来添加一个spinner：

<link href="https://cdnjs.cloudflare.com/ajax/libs/spectre.css/0.3.1/spectre.min.css" rel="stylesheet"/>

<div class="loading"></div>

【讨论】：

【解决方案5】：

我在一个单独的文件中编写了加载器代码，以便它可以重复使用

文件：Loader.js

export const elementString = {
    loader:'loader' // class name that I used in renderLoader function
}
export const renderLoader = parent =>{
    const loader = `
    <div class='${elementString.loader}'>
        <svg>
            <use href="img/icons.svg#icon-cw"></use>
        </svg>
    </div>
    `;
    parent.insertAdjacentHTML('afterbegin', loader);
};

export const clearLoader=()=>{
    const loader = document.querySelector(`.${elementString.loader}`);
    if(loader){
        loader.parentElement.removeChild(loader);
    }
}

文件：style.css

.loader {
  margin: 5rem auto;
  text-align: center; }
  .loader svg {
    height: 5.5rem;
    width: 5.5rem;
    fill: #F59A83;
    transform-origin: 44% 50%;
    animation: rotate 1.5s infinite linear; }

    @keyframes rotate {
  0% {
    transform: rotate(0); }
  100% {
    transform: rotate(360deg); } }

文件：icons.svg

<svg aria-hidden="true" style="position: absolute; width: 0; height: 0; overflow: hidden;" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<symbol id="icon-cw" viewBox="0 0 20 20">
<title>cw</title>
<path d="M19.315 10h-2.372v-0.205c-0.108-4.434-3.724-7.996-8.169-7.996-4.515 0-8.174 3.672-8.174 8.201s3.659 8.199 8.174 8.199c1.898 0 3.645-0.65 5.033-1.738l-1.406-1.504c-1.016 0.748-2.27 1.193-3.627 1.193-3.386 0-6.131-2.754-6.131-6.15s2.745-6.15 6.131-6.15c3.317 0 6.018 2.643 6.125 5.945v0.205h-2.672l3.494 3.894 3.594-3.894z"></path>
</symbol>
</defs>
</svg>

文件：app.js

renderLoader(document.querySelector('.results'));// .results is the parent of my searchlist which I am shoing in the view
await state.search.getResults();
clearLoader();

文件：app.html

<body>
    <div class="container">
        <div class="results">
            <ul class="results__list">
            </ul>
        </div>
    </div>

</body>

【讨论】：

【解决方案6】：

只需在图表 div 中添加一个旋转的 gif，加载时它会自动被谷歌图表替换。像这样， ""

【讨论】：