我确实有一个 URL，它打开了一个加载速度很慢的网页，我无法控制它。
我确实想在有人单击此 URL 时显示加载对话框，或者在发生这种情况时使用覆盖 div 阻止页面。
注意：这与与 ajax 相关的问题不同，这是针对用户的正常 URL 点击，并非所有这些都只是特定的。
<A href="http://veryslowload.com" onClick="...">slow load...</a>
我想我正在寻找的是放在 onClick 上的内容。
问问题
52711 次
9 回答
7
你可以这样做 ：
$(function(){
$('a').click(function(){
$('<div class=loadingDiv>loading...</div>').prependTo(document.body);
});
});
演示（将链接更改为非常慢的页面以获得最佳效果）
但这取决于页面：如果页面立即发送一些内容而不是全部内容，您将没有时间查看您的 div。
于 2012-11-29T12:54:11.777 回答
6
如果您还需要动画，这将成为一件复杂的事情，因为浏览器的行为非常不同。有些会在新页面开始加载时停止所有 GIF 动画。如果你有 jQuery 并下载 spin.js 库，基本上它可以归结为这样的事情。
在此处查看工作解决方案：
<style>
#loading {
display:none;
position:absolute;
left:0;
top:0;
z-index:1000;
width:100%;
height:100%;
min-height:100%;
background:#000;
opacity:0.8;
text-align:center;
color:#fff;
}
#loading_anim {
position:absolute;
left:50%;
top:50%;
z-index:1010;
}
</style>
<div id="loading"><div id="loading_anim"></div></div>
<a href="http://pangoo.it" class="mylinkclass withanimation">link</a>
<script>
$(function () {
$(".withanimation").click(function(e) {
e.preventDefault();
$("#loading").show();
var url=$(this).attr("href");
setTimeout(function() {
setTimeout(function() {showSpinner();},30);
window.location=url;
},0);
});
});
function showSpinner() {
var opts = {
lines: 15, // The number of lines to draw
length: 3, // The length of each line
width: 4, // The line thickness
radius: 30, // The radius of the inner circle
rotate: 0, // The rotation offset
color: '#fff', // #rgb or #rrggbb
speed: 2, // Rounds per second
trail: 70, // Afterglow percentage
shadow: false, // Whether to render a shadow
hwaccel: false, // Whether to use hardware acceleration
className: 'spinner', // The CSS class to assign to the spinner
zIndex: 2e9, // The z-index (defaults to 2000000000)
top: 'auto', // Top position relative to parent in px
left: 'auto' // Left position relative to parent in px
};
$('#loading_anim').each(function() {
spinner = new Spinner(opts).spin(this);
});
}
</script>
如果您使用动画 (GIF)，动画可能会在某些浏览器上冻结。我使用了 spin.js 库（http://fgnass.github.com/spin.js/）。虽然 GIF 被冻结，但 javascript 动画似乎正在工作。
请使用所有浏览器进行测试！
于 2012-11-29T13:13:01.813 回答
2
虽然 ajax 会更优雅，但它是可能的。您必须通过阻止默认事件来拦截导航，然后强制更新 UI，然后将位置更改为目标 url。像这样的东西：
$('#mylink').click(function(e) {
e.preventDefault();
var url = this.href;
// Update the UI here
setTimeout(function() {
// This is a trick to force a repaint
window.location.href = url;
},0);
});
于 2012-11-29T12:56:15.343 回答
1
大概，您希望加载对话框立即出现，然后在新页面呈现时消失并被新页面替换？
三个想法浮现在脑海。
如果您可以控制源页面但不能控制目标 - 使用 click 事件处理程序将标签的正常行为替换为以下内容：
- 显示加载动画
- 向标签的 href 属性定义的 URL 发出 AJAX 请求（或者，创建一个以 URL 作为其源的隐藏）
- 请求完成后，将文档的内容替换为响应。
但是，这可能会变得非常棘手，因为您不会丢失原始页面中定义的 javascript 和 css。它也不会更改用户浏览器中显示的 URL。
如果您可以控制目标并且可以使目标可缓存（即使是几秒钟）：您可以通过 AJAX 在后台加载页面，然后重定向到它。第一次加载会很慢，然后重定向将从缓存中加载页面。
还有另一种选择：如果您可以控制目标页面，则可以定义一个可选参数，如果该参数存在，服务器会返回一个页面，该页面仅包含加载动画和一些加载实际页面的 javascript。
于 2012-11-29T13:03:22.700 回答
1
这是一个老话题，但如果您想要一个不依赖于 JQuery 的简单解决方案，请将以下内容添加到链接中的 onClick 中：
<A href="http://veryslowload.com" onClick=""javascript:document.getElementById('page-loader').style.display='block';"">slow load...</a>
然后在您页面的某个位置，有一个隐藏的 DIV，其中包含您想要加载对话框的内容。
<div id="page-loader">
<h3>Loading page...</h3>
</div>
并使用 CSS 隐藏 DIV，如下所示：
#page-loader {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 10000;
display: none;
text-align: center;
width: 100%;
padding-top: 25px;
background-color: rgba(255, 255, 255, 0.7);
}
这是一个工作示例的 JSfiddle：http: //jsfiddle.net/meb69vqd/
我不能完全相信这个例子。这里有关于此技术的其他提示：https ://css-tricks.com/css-page-loader/
于 2018-11-10T16:35:32.080 回答
0
您可以创建一个隐藏的 iframe 并监听 load 事件。您还需要在大约 1 秒后进行手动检查，以防目标阻止了 x 帧内容。
演示：http: //jsbin.com/ijofih/1
$('a').click(function(e) {
$(this).text('Loading...'); // do your UI thing here
e.preventDefault();
var destination = this.href;
setTimeout(function() {
window.location = destination;
},1000);
$('<iframe>').hide().appendTo('body').load(function() {
window.location = destination;
}).attr('src', destination);
});
于 2012-11-29T13:21:44.247 回答
0
最初将 spinner.gif 存储在表单中的某个位置并将其隐藏并放置 src=""
因此将没有图像的 src
但稍后在进行 ajax 调用时，您可以为微调器图像设置 src，因此您的页面似乎正在加载
$(document).ready(function() {
// bind 'myForm' and provide a simple callback function
$("#tempForm").ajaxForm({
url:'url to be called',
type:'post',
beforeSend:function()
{
alert("this is the place where you place things to happen till your page is being transfered to the given URL so i am setting the src for the spinner image here");
$("#spinner image ID").attr("src","../images/spinner.gif");
},
success:function(e){
alert("do whatever you want with response here");
}
});
});
于 2012-11-29T13:07:21.537 回答
0
对@bfavaretto 对我有用的解决方案的改进
$('#mylink').click(function(e) {
e.preventDefault();
var url = this.href;
// Update the UI here
requestAnimationFrame(function() {
setTimeout(function() {
window.location.href = url;
});
});
});
浏览器会不一致地显示我的微调器。我尝试通过增加 setTimeout 的延迟来解决问题。正确的解决方案是询问浏览器何时准备好显示微调器，然后导航离开。
于 2020-01-17T23:46:59.437 回答
-1
您可能想查看模态框。您可以在发送 ajax 请求时激活模型框，成功后可能会关闭它。 https://www.google.com/search?sugexp=chrome,mod=10&sourceid=chrome&ie=UTF-8&q=modal+box
于 2012-11-29T12:52:57.230 回答