当有人点击特定链接时如何显示加载对话框？ [英] How to display loading dialog when someone clicks a specific link?

问题描述

我有一个网址，打开一个加载速度非常慢的网页，我无法控制它。

I do have an URL which opens a webpage which is very slow to load and I have no control over it.

我确实希望在显示加载对话框时显示当发生这种情况时，有人点击此URL或阻止带有重叠div的页面。

I do want to display a loading dialog when someone clicks this URL or to block page with an overlay div when this happens.

注意：这与ajax相关的问题不同，这对于正常的URL点击形成用户，而不仅仅是特定的用户。

Note: this is not the same question as the ajax related ones, this for normal URL clicks form the user, not all of them only specific ones.

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

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

I suppose that what I am looking for is what to put on the onClick.

推荐答案

如果你还需要一个动画，它会变得很复杂，因为浏览器的行为非常不同。当新页面开始加载时，有些会停止所有GIF动画。基本上，如果你有jQuery并下载spin.js库，它就归结为这样的东西。

If you also need an animation, it becomes a complicated matter as browsers behave very differently. Some stop all GIF animations when a new page starts loading. Basically it comes down to something like this if you have jQuery and download the spin.js library.

在这里查看工作解决方案：

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

If you use an animated (GIF) the animation may freeze on some browsers. I used spin.js library ( http://fgnass.github.com/spin.js/ ). While GIFs get frozen the javascript animation seems to be working.

请测试所有浏览器！

这篇关于当有人点击特定链接时如何显示加载对话框？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！