[英]Show a 'Loading' Icon while loading Scripts
我想显示“正在加载”图标或gif,背景为全黑(透明)(宽度和高度为100%),同时加载一些脚本(反向拉伸和JQuery滚动条)。 加载这些代码后,我希望消失“ Gif加载图标”和黑色背景,然后显示整个正常的网页。 我需要做什么? 在这里,您有我用于那些脚本的代码。
直道
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-backstretch/2.0.3/jquery.backstretch.min.js"></script>
<script>
$.backstretch([
"http://www.hqdiesel.net/gallery/albums/userpics/10004/iggy_hqdiesel130~0.jpg"
, "http://www.hqdiesel.net/gallery/albums/userpics/10004/iggy_hqdiesel128~0.jpg"
, "http://www.hqdiesel.net/gallery/albums/userpics/10004/iggy_hqdiesel143~0.jpg"
], {duration: 5000, fade: 750});
</script>
jQuery滚动条
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://danithemes.fanscity.eu/shugar/wp-content/uploads/2014/11/jquery.mCustomScrollbar.concat.min_.js"></script>
<script>
(function($){
$(window).load(function(){
$(".onliners, .packages").mCustomScrollbar();
});
})(jQuery);
</script>
非常感谢! 我很抱歉我的英语!
您可以仅使用CSS将背景图像添加到加载div中,并且在加载所有脚本时只需隐藏该div。
这是js:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
(function($){
$(window).load(function(){
$(".myLoadingDiv").fadeOut(600);
});
})(jQuery);
</script>
这是css:
.myLoadingDiv {
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.8); /* opacity to your taste */
background-image: url(img/yourGif.gif);
background-repeat: no-repeat;
background-position: 50% 50%;
position: absolute;
left: 0; top: 0;
z-index: 9999; /* at the top of the world */
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.