Efecto cargando...!

[raxper]

Hola, necesitaba hacer es esto:

Cuando el usuario hague click en documento1 este muestre en un div
[ esta cargando...], y de pronto muestre el documento cargado.

Sin utilizar jquery o otras documentaciones ya creadas, quiero aprender a crearlo, por mi parte estaré intentando crearlo si me dejan el código fuente de algo parecido o darme pistas, así es como yo aprendo.

[IsaBelM]

interpreto que cuando dices documento, te refieres a elemento u objeto. si esto es así puedes usar el temporizador setTimeout. cuando transcurra el tiempo que especifiques, se invoca la función para mostrar el contenido del elemento

[raxper]

Iniciado por IsaBelM

interpreto que cuando dices documento, te refieres a elemento u objeto. si esto es así puedes usar el temporizador setTimeout. cuando transcurra el tiempo que especifiques, se invoca la función para mostrar el contenido del elemento

Si lo hice así pero lo que quiero es que, digue cargando y cuando ya esté cargado el documento al 100% me lo muestre.

A esto te ¿refieres?

Código Javascript:

function cargar(){document.getElementById('cargando').innerHTML = "Cargando por favor Espere";setTimeout("document.getElementById('cargando').innerHTML = 'Aquí muestro lo que he cargado.';", 1000)}
 

<a onclick="cargar()">Documento</a>
<div id="cargando">
</div>

[javiercitox]

yo se hacerlo con Ajax...

Código Javascript:

<script type="text/javascript">
    function ajaxFunction() {
        var xmlHttp;
        try {
            // Firefox, Opera 8.0+, Safari
            xmlHttp = new XMLHttpRequest();
            return xmlHttp;
        }
        catch (e) {
            // Internet Explorer
            try {
                xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
                return xmlHttp;
            }
            catch (e) {
                try {
                    xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
                    return xmlHttp;
                }
                catch (e) {
                    alert("Tu navegador no soporta AJAX!");
                    return false;
                }
            }
        }
    }
 
    function fajax(parametro) {
        var url = "miURL.aspx";              //página que se debe cargar en el lenguaje q quieras PHP, ASP, .NET, etc...
        var contenedor = "cargaAjax";  //id div a recargar
        var ajax = ajaxFunction();
        if (!ajax) {
            alert("No se puede ejecutar este proceso: Error de navegador");
            return false;
        }
 
        document.getElementById(contenedor).innerHTML = "Cargando...";
        
        //indico q por POST envio variables a url
        ajax.open("POST", url, true);
 
        ajax.onreadystatechange = function () {
            if (ajax.readyState == 4 && (ajax.status == 200 || window.location.href.indexOf("http") == -1)) {
                //aqui escribo lo que quiera procesar.... por ejemplo
                parametro = parametro + 1000;
            }
        }
        ajax.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
        //envio la variable que quiera
        ajax.send("parametro=" + parametro);
    }                
</script>
 

[raxper]

Y esa sintaxis, puede leer ¿javascript en los div?, yo también antes lo hacia con ajax y no lo leía, aunque había una solución hecho por maborak no lo apliqué


Bueno gracias a los dos :D, por el momento utilizaré algo pollito pero me gusta :D
Por que al darle click, va cargando el documento en un iframe oculto y despues de un determinado tiempo con settimeout, desaparesco el div loading y muestro el iframe oculto cargado, esto me ahorra tiempo.

Código Javascript:

function iframes(){document.getElementById('iframe').style.display="block";document.getElementById('cargando').style.display="none";}
function cargar(url){document.getElementById('iframe').innerHTML = "<iframe width=600 height=600 src="+url.name+"></iframe>";document.getElementById('iframe').style.display="none";document.getElementById('cargando').style.display="block";document.getElementById('cargando').innerHTML = "Cargando por favor Espere"; var tempo = setTimeout('iframes()', 3000)}
 

<a onclick="cargar(this);" name="http://busc4.com">Busc4</a><br />
<a onclick="cargar(this);" name="http://sitionario.com.ar">Sitio Nario</a><br />
<a onclick="cargar(this);" name="http://google.com">Google</a><br />

<div id="iframe"></div>
<div id="cargando">
</div>

[IsaBelM]

ahora he comprendido. lee este tema. tienes otras opciones