将预加载器添加到div标签
[英]adding preloader to div tag
问题描述
we have an ajax script that gets a word and loads some related data into a div tag. 
我们有一个ajax脚本，该脚本获取一个单词并将一些相关数据加载到div标签中。
it works fine but we want to add preloader (without jQuery) to div tag, we tried spin.js but it works only for whole page, this is what we did: (Summarized) 它工作正常，但我们想向div标签添加预加载器（不使用jQuery），我们尝试了spin.js，但它仅适用于整个页面，这就是我们所做的：（总结）
<head>
<script src="spin.min.js"></script>
</head>
<body>
<div id="data">
//data loads here
</div>
<script type="text/javascript" charset="utf-8">
var opts = {
lines: 13, // The number of lines to draw
length: 7, // The length of each line
width: 4, // The line thickness
radius: 28, // The radius of the inner circle
rotate: 0, // The rotation offset
color: '#000', // #rgb or #rrggbb
speed: 1, // Rounds per second
trail: 92, // Afterglow percentage
shadow: false, // Whether to render a shadow
hwaccel: false, // Whether to use hardware acceleration
className: 'spinner', // The CSS class to assign to the spinner
zIndex: 2e9, // The z-index (defaults to 2000000000)
top: 'auto', // Top position relative to parent in px
left: 'auto' // Left position relative to parent in px
};
var target = document.getElementById('data');
var spinner = new Spinner(opts).spin(target);
</script>
</body>
what is wrong? 怎么了？ and any other (and better) solutions? 和其他任何（以及更好的）解决方案？
1 个解决方案
解决方案1
0 2012-06-06 16:57:52
Your data div has full width and spin.js will place the image at the center of the element both vertically and horizontally thats why you are seeing this on a full screen based. 您的data div具有全宽， spin.js会将图像垂直和水平放置在元素的中央，这就是为什么您在全屏模式下看到它的原因。
For eg 例如
<head>
<script src="spin.js"></script>
</head>
<body>
<div id="data" style="width: 100px; height: 100px; float: left;">
<!-- Data Loads Here-->
</div>
<div id="NoData" style="width: 100px; height: 100px; float: left;">
Hello Hi Bye
</div>
<script type="text/javascript" charset="utf-8">
var opts = {
lines : 13, // The number of lines to draw
length : 7, // The length of each line
width : 4, // The line thickness
radius : 28, // The radius of the inner circle
rotate : 0, // The rotation offset
color : '#000', // #rgb or #rrggbb
speed : 1, // Rounds per second
trail : 92, // Afterglow percentage
shadow : false, // Whether to render a shadow
hwaccel : false, // Whether to use hardware acceleration
className : 'spinner', // The CSS class to assign to the spinner
zIndex : 2e9, // The z-index (defaults to 2000000000)
top : 'auto', // Top position relative to parent in px
left : 'auto' // Left position relative to parent in px
};
var target = document.getElementById('data');
var spinner = new Spinner(opts).spin(target);
</script>
</body>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.