使用javascript更改可见性
changing visibility using javascript
hi我有一个使用ajax从另一个页面检索数据的网页,在这样做的同时,我想在页面中显示一个加载gif,所以我创建了一个带有gif的div。
<div id="loading"><img src="images/loadinfo.net.gif" width="48" height="48" /></div>
这是我的css代码:
#content #loading {
visibility:hidden;
position: fixed;
width: 48px;
top: 0px;
}
现在,我想我所需要做的就是在加载内容ajax函数开始时将加载div的可见性设置为"visible",然后在最后将其再次隐藏但奇怪的是,如果我创建可见的加载div,然后在ajax函数开始时将其隐藏,它就可以正常工作了!!!
这是我的功能:
function ajaxpage(url, containerid) {
document.getElementById('loading').style.visibility = 'visible';
var bustcachevar = 1 //bust potential caching of external pages after initial request? (1=yes, 0=no)
var loadedobjects = ""
var rootdomain = "http://" + window.location.hostname
var bustcacheparameter = ""
var page_request = false
if (window.XMLHttpRequest) // if Mozilla, Safari etc
page_request = new XMLHttpRequest()
else if (window.ActiveXObject) { // if IE
try {
page_request = new ActiveXObject("Msxml2.XMLHTTP")
} catch (e) {
try {
page_request = new ActiveXObject("Microsoft.XMLHTTP")
} catch (e) {}
}
} else
return false
page_request.onreadystatechange = function () {
loadpage(page_request, containerid)
}
if (bustcachevar) //if bust caching of external page
bustcacheparameter = (url.indexOf("?") != -1) ? "&" + new Date().getTime() : "?" + new Date().getTime()
page_request.open('GET', url + bustcacheparameter, true)
page_request.send(null)
}
function loadpage(page_request, containerid) {
if (page_request.readyState == 4 && (page_request.status == 200 || window.location.href.indexOf("http") == -1)) document.getElementById(containerid).innerHTML = page_request.responseText
}
function loadobjs() {
if (!document.getElementById) return
for (i = 0; i < arguments.length; i++) {
var file = arguments[i]
var fileref = ""
if (loadedobjects.indexOf(file) == -1) { //Check to see if this object has not already been added to page before proceeding
if (file.indexOf(".js") != -1) { //If object is a js file
fileref = document.createElement('script')
fileref.setAttribute("type", "text/javascript");
fileref.setAttribute("src", file);
} else if (file.indexOf(".css") != -1) { //If object is a css file
fileref = document.createElement("link")
fileref.setAttribute("rel", "stylesheet");
fileref.setAttribute("type", "text/css");
fileref.setAttribute("href", file);
}
}
if (fileref != "") {
document.getElementsByTagName("head").item(0).appendChild(fileref)
loadedobjects += file + " " //Remember this object as being already added to page
}
}
document.getElementById('loading').style.visibility = 'hidden';
}
function loadpage (page_request, containerid)
{
var loading = document.getElementById ( "loading" ) ;
// when connecting to server
if ( page_request.readyState == 1 )
loading.style.visibility = "visible" ;
// when loaded successfully
if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf("http")==-1))
{
document.getElementById(containerid).innerHTML=page_request.responseText ;
loading.style.visibility = "hidden" ;
}
}
如果您只想在收到响应时显示它,请将其添加到您的loadpage()中
function loadpage(page_request, containerid){
if (page_request.readyState == 4 && page_request.status==200) {
var container = document.getElementById(containerid);
container.innerHTML=page_request.responseText;
container.style.visibility = 'visible';
// or
container.style.display = 'block';
}
}
但这完全取决于如何首先隐藏div
使用显示而不是可见性。display:none表示不可见,no表示可见。
相关文章:
- JavaScript可见性不起作用('隐藏'起作用,'可见'不起作用)
- 使用 Javascript 将 HTML 页面中的默认可见性从可见更改为隐藏
- CSS 中定义的可见性值未显示在 Javascript 中
- 使用javascript的图像可见性
- Javascript - 切换可见性
- 如何在javascript中设置asp:checkbox的可见性
- onClick()JavaScript可见性更改
- 根据弹出窗口javascript的返回值更改asp.net面板的可见性
- 使用Javascript在按键时显示隐藏的可见性文本
- 使用 Javascript 更改 CSS 动画可见性
- 为什么 Javascript 函数调用在从代码隐藏更改可见性后不起作用
- css 可见性属性和 javascript setTimeout 方法出错
- Javascript:使用图标来控制部分内容的可见性
- 如何在 JavaScript 中更改图像可见性
- 使用 JavaScript 复选框事件切换 html 的可见性
- 变量在 Javascript 中的可见性
- JavaScript 函数通过发送下一个元素的整数来更改元素的可见性
- 如何使用增量 + 选项(或可见性)在 JavaScript 上实现可见性
- 样式可见性和JavaScript
- 为什么我的切换可见性javascript函数不起作用