如何添加一个加载“旋转图标”

Question

我有一些非常简单的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()函数添加内容，以便每次初始化时都会弹出加载器，然后在图片加载完成后淡出？

- thindery

---

你已经添加了jQuery标签，但是你实际上在使用jQuery吗？你想要一个jQuery的答案吗？ - Matthew Riches

jQuery或者仅使用JavaScript也可以，插件看起来两者都能处理。 - thindery

Answer 1

你们正在把这个问题弄得比它本身需要的更加复杂。将图片放在一个 div 中，并将 div 的背景设置为动图就可以了。

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

无需使用任何JS，图像将仅在背景旋转器上加载。

- Chris

Answer 2

建议的解决方案

对于图片，使用“加载旋转器”存在问题。请参见下文。

不要使用旋转器，先发送图像的低分辨率（考虑使用黑白）。这个SO问题告诉你如何做到。

图片加载的旋转器

显示旋转器时等待图像显示的问题在于浏览器不能可靠地告诉您的JS图像何时已加载。

如果没有触发，则您将永远看着旋转器......

请参阅jQuery load事件的文档--

与图像一起使用load事件的注意事项

开发人员尝试使用.load()快捷方式解决的常见问题是，在图像（或图像集）完全加载后执行函数。应该注意以下几点。这些是：

• 它在各种浏览器中工作不一致且不可靠
• 如果图像src设置为与之前相同的src，则在WebKit中不正确触发
• 它不能正确地冒泡DOM树
• 对于已存在于浏览器缓存中的图像，可能会停止触发

- Larry K

---

旋转器的原因只是为了让客户知道图像正在更新。渲染出的图像实际上非常快。每次调用setJPG时，可能最好只显示旋转器x秒钟，以给出“印象”。你觉得呢？ - thindery

是的，一个定时弹出窗口，显示“正在工作…”可能会很有用。我在我的一些应用程序中已经这样做了。但如果整个过程非常快，那么请仔细考虑为什么需要它。您还可以使用横幅类型的消息“已更新”，它会出现然后消失。Google在Gmail和其他地方使用此类型的反馈。 - Larry K

Answer 3

最简单的方法是创建两个div，一个覆盖在另一个上面。

一个带有旋转图标的div覆盖内容的div，当页面完成加载后，显示内容div。

在这个例子中，我使用window.load事件，所以你可能需要修改事件为image 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();
    });
});

- Federico Giust

---

OP想知道图像何时被加载。因此需要使用load。但是，应该在图像元素上使用load。此外，可能不会始终触发，从而使旋转器保持打开状态。请参见load事件文档。 - Larry K

抱歉，我刚才匆匆浏览了你的回答。我的想法更偏向于在文档准备就绪时隐藏加载图形，并编写一个在需要时调用它的函数。我的错。 - Matthew Riches

load事件处理程序难道不应该附加到图像而不是页面上吗？我们不知道setJPG何时被调用--如果它是对用户操作的响应，它可能会在页面加载后几分钟才被调用。 - apsillers

Answer 4

如果您正在使用Spectre css，您可以添加此div以添加旋转器：

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

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

- Thomas

Answer 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>

- Rafiq

Answer 6

只需在图表 div 中添加一个旋转的 gif，当 Google 图表加载完成时，它将自动替换。就像这样，""

- Swati