如何添加加载“微调器”

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() 函数添加一些东西，以便它在每次初始化时弹出加载器，然后在加载图像后消失？

Answer 1

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

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

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

Answer 2

最简单的方法是创建两个 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();
    });
});

Answer 3

建议的解决方案

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

首先发送图像的低分辨率（也考虑黑白），而不是微调器。 这个问题说明了如何。

用于图像加载的微调器

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

如果它没有开火，那么您将永远看着微调器......

请参阅jQuery 加载事件的文档——

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

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

• 它不能始终如一地工作，也不能可靠地跨浏览器
• 如果图像 src 设置为与以前相同的 src，则它不会在 WebKit 中正确触发
• 它没有正确地冒泡 DOM 树
• 对于已经存在于浏览器缓存中的图像，可以停止触发

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>

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>

Answer 6

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