如何在加载完整个html页面之前显示正在加载的gif？
如何在加载完整个html页面之前显示正在加载的gif？
提问于 2014-03-03 02:51:07
我有一个网页，这是相当密集的通过HTML和CSS，这导致一些元素加载比其他更快，当用户访问该页面。背景可能需要一段时间才能加载，等等...看着它一个元素一个元素地加载会变得相当丑陋……
所以我想知道如何才能先加载一个不同的页面(page1，它只有一个gif和最小的html)，然后page2 (具有密集html的页面)只有在客户端浏览器获取了所有页面html之后才会出现。
我相信这可以用JQuery来完成，我对它几乎一无所知……
任何建议都将不胜感激，谢谢
回答 3
Stack Overflow用户
回答已采纳
发布于 2014-03-03 02:53:42
使用以下HTML (最好在正文的顶部)：
<div id="loading"></div>还有这个CSS：
#loading {
background: url('spinner.gif') no-repeat center center;
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: 9999999;
}和下面的JavaScript (使用jQuery)：
function hideLoader() {
$('#loading').hide();
}
$(window).ready(hideLoader);
// Strongly recommended: Hide loader after 20 seconds, even if the page hasn't finished loading
setTimeout(hideLoader, 20 * 1000);您可以将样式内联到div上，而不是放在样式表中，这样就不太可能在加载程序之前出现闪现的内容。此外，您可以使用https://www.askapache.com/online-tools/base64-image-converter/或类似工具将GIF转换为base64URI，并使用该URI而不是spinner.gif。
Stack Overflow用户
发布于 2014-03-03 02:56:27
<div id="overlay"></div>
<style>
#overlay {
position: fixed;
background: rgba(0,0,0,0.8);
width: 100%;
height: 100%;
top: 0;
left: 0;
}
.hide {
display: none;
}
</style>
<script>
$(window).load(function() {
$('#overlay').addClass('hide');
});
</script>Stack Overflow用户
发布于 2018-12-04 15:30:25
我已经在Laravel中实现了它，它像预期的那样工作。
<style>
.loader {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 9999;
background-color: #ffffffcf;
}
.loader img{
position: relative;
left: 40%;
top: 40%;
}
</style>
<div class="loader" ><img src="{{asset('public/img/loader.gif')}}"></div>
<script>
window.onload = function()
{
//display loader on page load
$('.loader').fadeOut();
}
</script>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/22131821
复制相关文章
相似问题
腾讯云开发者
