我有一个网页,这是相当密集的通过HTML和CSS,这导致一些元素加载速度比其他人当用户访问该页面。背景可能需要一段时间来加载,等等.它得到相当丑陋看到它所有的加载元素的元素.所以我想知道我如何才能首先加载一个不同的页面(第1页,只有一个gif和最少的html),然后只有在客户端的浏览器获取了所有页面的html之后,第2页(具有密集html的页面)才会出现。我相信这可以用jQuery来完成,我对jQuery几乎一无所知。任何建议将不胜感激,谢谢,
nzrxty8p1#
使用以下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转换为base 64 URI,并使用它而不是spinner.gif。
div
spinner.gif
wz1wpwve2#
<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>
字符串
wvmv3b1j3#
我已经在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>
3条答案
按热度按时间nzrxty8p1#
使用以下HTML(最好在正文的顶部):
字符串
这个CSS:
型
下面的JavaScript(使用jQuery):
型
你可以将样式内联到
div
上,而不是放在样式表中,以减少加载器之前出现内容的机会。此外,你可以使用https://www.askapache.com/online-tools/base64-image-converter/或类似的工具将GIF转换为base 64 URI,并使用它而不是spinner.gif
。wz1wpwve2#
字符串
wvmv3b1j3#
我已经在Laravel中实现了,它像预期的那样工作,
字符串