Question

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

我已经厌倦了使用我对JQuery的微小知识，但我似乎无法找到方法。

谢谢！

Answer 1

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

＆＃13;

$(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
    });

})

＆＃13;

#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;
}

＆＃13;

<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>

＆＃13;

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/

创建加载屏幕，在按钮单击x时间后消失

2 个答案: