3

我有一些非常简单的 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() 函数中添加一些内容，以便它在每次初始化时弹出加载器，然后在加载图像后消失？

4

6 回答 6

3

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

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

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

于 2016-04-23T00:17:12.907 回答
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();
    });
});
于 2012-05-31T14:57:24.730 回答
2

建议的解决方案

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

首先发送图像的低分辨率（也考虑黑白）而不是微调器。这个 SO question 告诉我们如何。

用于图像加载的微调器

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

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

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

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

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

  • 它不能始终如一地工作，也不能可靠地跨浏览器
  • 如果图像 src 设置为与以前相同的 src，它不会在 WebKit 中正确触发
  • 它没有正确地冒泡 DOM 树
  • 可以停止对已经存在于浏览器缓存中的图像进行触发
于 2012-05-31T15:04:54.413 回答
0

如果您使用的是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>

于 2017-08-22T12:13:05.193 回答
0

在此处输入图像描述

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

文件：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>
于 2020-05-08T06:38:52.843 回答
-3

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

于 2016-08-15T19:30:53.830 回答