创建一个在点击x次按钮后消失的加载屏幕

Question

我想知道是否有可能添加一个“加载屏幕”，这可能是一个覆盖，当用户点击我的网站上的特定链接时显示。将用户带出站点的外部链接。是否可以在单击链接/按钮时出现加载屏幕，该屏幕显示2-3秒，然后开始加载目标URL？

我已经尝试使用我对JQuery的微不足道的知识，但我似乎找不到一种方法。

谢谢!

Answer 1

检查以下示例，在打开外部链接之前使用setTimeout等待2秒：

​

$(function(){

    $('body').on('click', '#external-link', function(e)
    {
        e.preventDefault();

        var link = $(this).attr('href');
        
        $('body').append(
            '<div id="overlay">' +
            '<img id="loading" src="http://bit.ly/pMtW1K">' +
            '</div>'
        );
        
        setTimeout(function(){
          $('#overlay').remove();
          window.open( link );
        }, 2000); //2 seconds
    });

})

#overlay {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    background: #000;
    opacity: 0.8;
    filter: alpha(opacity=80);
}
#loading {
    width: 50px;
    height: 57px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -28px 0 0 -25px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="http://google.com" id="external-link">External link</a>

​

Answer 2

这可以在不依赖于jQuery或任何第三方库的情况下完成。在您的外部链接上连接一个事件侦听器，应用加载覆盖，并使用setTimeout()插入您的人为延迟。

​

var delay = 2000;
var els = document.getElementsByClassName('external-link');
var loader = document.getElementById('loading');

for(var i = 0;i < els.length;i++){    
    els[i].addEventListener('click', function(e) {  
        var source = e.target || e.srcElement;
        e.preventDefault();        
        loader.className = loader.className.replace('hidden', '');
        
        setTimeout(function() {             
            window.open(source.href);            
            loader.className += 'hidden';
        }, delay);
    }, false);
}

.hidden {
    display:none;
}
.loader {
    position:fixed;
    height:100%;
    width:100%;
    background-color: grey;
    opacity:0.5;
}
.loader-text {
    position:fixed;
    top:45%;
    left:45%;

}

<div class="loader hidden" id="loading">
    <span class="loader-text">Loading...</div>
</div>

<div>
    Website Content
    <a href="http://google.com" class="external-link">Click me!</a>
    <a href="http://yahoo.com" class="external-link">Or me!</a>
</div>

​

jsFiddle：http://jsfiddle.net/sysnull/t93ydLgy/3/