如何添加一个加载“微调”

我有一些非常简单的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（）函数添加一些东西，以便它在每次初始化时弹出加载程序，然后在加载图像后消失？

来源

2012-05-31 thindery

您已经添加的jQuery的标签，但使用是你实际上jQuery，你想要一个jQuery的答案？ –

jquery或只是JavaScript是好的。看起来这个插件可以兼得。 – thindery

建议的解决方案

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

而不是一个微调，首先发送低分辨率（考虑B & W）的图像。 This SO question tells how.

纱厂的图像加载

与展示，而你等待要显示的图像的微调的一个问题是，浏览器不可靠告诉JS当图像加载。

而且如果它不火，那么留给你看微调永远...

请参阅该文档为jQuery load event - 负载事件时的

注意事项与图像一起使用

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

这并不一致，也不可靠地工作，跨浏览器的

它不正确的WebKit如果图像的src设置为相同的SRC像以前

它不火正确地泡了DOM树

可以停止火已经生活在浏览器的缓存图片

来源

2012-05-31 15:04:54

微调的原因只是让客户知道图像正在更新。渲染的图像实际上非常快。每次调用setJPG时只显示微调量为秒的微调可能会更好，只是为了给出“印象”。你怎么看？ – thindery

是的，这说的是一个定时弹出“工作......”可能是有用的。我在我的一些应用程序上完成了它。但是，如果整个事情非常快，那么仔细想想为什么它需要在第一位。您也可以显示一条标题类型的消息“已更新”，然后消失。 Google在Gmail和其他地方使用这种类型的反馈。 –

感谢您的想法和反馈拉里k。 – thindery

最简单的方法是创建两个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-31 14:57:24

会和$（文件）。就绪，而不是window.load –

OP想要加载图像时知道去。所以需要使用负载。但是，应该在图像元素上使用加载。加上可能并不总是火，离开微调。参见[加载事件文档（http://api.jquery.com/load-event/） –

对不起，掠过你的答案。我正在思考如何让文档准备好隐藏加载图形以及在需要时调用它的函数，这是我的错误。 –

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

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

无需使用任何JS可言，所以图像只能加载在背景微调。

来源

2016-04-23 00:17:12 Chris

-2

纺纱GIF只需添加到图表DIV，它会自动由谷歌图表加载时更换。与此类似， “”

来源

2016-08-15 19:30:53 Swati

如果您正在使用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-22 12:13:05 Thomas

如何添加一个加载“微调”

回答

相关问题