加载脚本时显示“正在加载”图标
Show a 'Loading' Icon while loading Scripts
我想在加载一些脚本(后伸和 JQuery 滚动条)时显示一个"加载"图标或 gif,背景完全黑(透明度)(100% 宽度和高度)。加载这些代码后,我希望"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 */
}
相关文章:
- 正在加载下一个帖子
- Javascript不工作/正在加载
- 正在加载具有相同功能的多个对象
- 正在加载+10个帖子
- Angular2:Index.html没有't显示该文件;正在加载&”;
- 防止形成“;提交时”;正在加载空白页
- RequireJS正在加载angular应用程序,但没有't创建app.controller
- 正在等待加载文件(加载JavaScript)
- 由于正在加载modernizr,表单在单击时未提交
- 如何检测浏览器是否正在加载
- 最轻的js/css,用于向用户提供SPA正在加载/初始化的视觉反馈
- 正在加载动态日历以在一个月的正确日期开始
- 正在加载特定分区中的外部页面内容
- php表单发布时正在加载进度条
- 正在加载“"循环,每3秒更改一次文本
- Html5视频预加载正在阻止异步脚本
- Colorbox插件正在加载其自身的两个实例
- kwicks滑块正在加载,但鼠标悬停不起作用
- 正在加载新的Javascript,但正在调用旧的Javascript.MVC
- 正在加载ui路由器状态下的共享模型