网络建站知识

精准传达 • 价值共享

洞悉互联网前沿资讯,探寻网站营销规律

查看其它板块

网页预加载loading特效

作者:狐灵科技 | 2019-07-29 16:34 |点击:

什么是预加载?


 WEB预加载就是在网页全部加载之前,对一些主要内容进行加载,以提供给用户更好的体验,减少等待的时间。否则,如果一个页面的内容过于庞大,没有使用预加载技术的页面就会长时间的展现为一片空白,直到所有内容加载完毕。
  图片的预加载技术使用较为广泛,一般的效果是网页中的图片由模糊变得清晰。


怎么做预加载loading特效


CSS代码

.animationload {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #fff; /* change if the mask should have another color then white */
z-index: 999999; /* makes sure it stays on top */
}
.loader {
width: 200px;
text-indent: -99999;
height: 200px;
font-size: 0;
position: absolute;
left: 50%; /* centers the loading animation horizontally one the screen */
top: 50%; /* centers the loading animation vertically one the screen */
background-image: url(../images/loading.gif); /* path to your loading animation */
background-repeat: no-repeat;
background-position: center;
margin: -100px 0 0 -100px; /* is width and height divided by two */
}
 

JS代码:

// Page Preloader
$(window).load(function() {
$(".loader").delay(300).fadeOut();
$(".animationload").delay(600).fadeOut("slow");
});
 


HTML代码:

<div class="animationload">
  <div class="loader">玩命加载中...</div>
</div>
自己把CSS代码中的图片路径改成你自己的即可 一般把loading代码放到网站的头部

如果没有loading素材 可以查看这篇文章:分享网站建设中loading GIF SVG PNG图

如没特殊注明,文章均为狐灵科技原创,转载请注明   "网页预加载loading特效
多一份免费策划方案,总有益处。

请直接添加技术总监微信联系咨询

网站设计 品牌营销

多一份参考,总有益处

联系狐灵科技,免费获得专属《策划方案》及报价

咨询相关问题或预约面谈,可以通过以下方式与我们联系

业务热线:15082661954 / 大客户专线:15523356218