当有人点击特定链接时如何显示加载对话框？

Question

我有一个URL打开一个网页,加载速度很慢,我无法控制它.

我确实希望在有人点击此URL时显示加载对话框,或者在发生这种情况时阻止带有覆盖div的页面.

注意:这与ajax相关的问题不同,这对于普通的URL点击形成了用户,而不仅仅是特定的点击.

<A href="http://veryslowload.com" onClick="...">slow load...</a>

我想我正在寻找的是onClick上的内容.

Answer 1

你可以这样做 :

$(function(){
?  $('a').click(function(){
     $('<div class=loadingDiv>loading...</div>').prependTo(document.body); 
  });?
});

演示(将链接更改为非常慢的页面以获得最佳效果)

但这取决于页面:如果页面立即发送一些内容而不是整个内容,您将没有时间看到您的div.

Answer 2

如果你还需要动画,那么浏览器的行为会有很大的不同,这就变得很复杂.当新页面开始加载时,有些会停止所有GIF动画.基本上,如果你有jQuery并下载spin.js库,它可归结为类似的东西.

在此查看工作方案:

http://jsfiddle.net/7aJyP/

<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动画似乎正在运行.

请测试所有浏览器!

Answer 3

您可能想查看模态框。您可以在发送 ajax 请求时激活模型框，并在成功后关闭它。 https://www.google.com/search?sugexp=chrome,mod=10&sourceid=chrome&ie=UTF-8&q=modal+box