Question

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

我确实希望在有人点击此网址时显示加载对话框，或者在发生这种情况时阻止带有重叠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); 
  });
});

Demonstration（将链接更改为非常慢的页面以获得最佳效果）

但这取决于页面：如果页面立即发送一些内容而不是整个内容，您将没有时间看到您的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会更优雅，但它是可能的。您必须通过阻止默认事件来拦截导航，然后强制更新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);
});

Answer 4

据推测，您需要立即显示加载对话框，然后在新页面呈现时消失并替换为新页面？

想到了三个想法。

如果您可以控制源页面而不是目标 - 使用单击事件处理程序将标记的正常行为替换为以下内容：

显示加载动画
将AJAX请求发送到由标记的href属性定义的URL（或者，创建一个以URL作为源的隐藏）
请求完成后，将文档的内容替换为响应。

但是，这可能会变得非常毛茸茸，因为您不会丢失原始页面中定义的javascript和css。它也不会更改用户浏览器中显示的URL。

如果您可以控制目标并且可以使目标可缓存（即使几秒钟）：您可以通过AJAX在后台加载页面，然后重定向到它。第一次加载会很慢，然后重定向将从缓存中加载页面。

还有另一种选择：如果您可以控制目标页面，则可以定义一个可选参数，这样如果参数存在，服务器将返回一个页面，该页面仅包含加载动画和一些加载动画的javascript。实际页面。

Answer 5

最初将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");
               }
        });
        });

Answer 6

您可以创建隐藏的iframe并侦听加载事件。如果目的地阻止了x帧内容，您还需要在大约1秒后进行手动检查。

DEMO：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);
});

Answer 7

这是一个古老的话题，但是如果您想要一个不依赖于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/

Answer 8

对@bfavaretto适用于我的解决方案的改进

inport pandas as pd

# reads an 1 Dimensional List and reads it as columns
pd.DataFrame([
    [j for j in i for i in df.values] # makes 2D matrix of all values to 1D list
])

浏览器会不一致地显示我的微调器。我试图通过增加setTimeout的延迟来解决问题。正确的解决方案是询问浏览器何时准备显示微调框，然后离开。

Answer 9

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

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

9 个答案: