Basit bir script bir yükleme gif ekleme

2 Cevap php

Javascript ama Ive için gerçekten yeni Im url içeriğini yükler ve her şey gayet iyi çalışıyor bu script var. Ben bir düğme üzerinde bir onClick yöntemi ile plannerSpin işlevini çağırın ama nasıl tüm bu iken animasyonlu gif görüntüleme oluyor hakkında gitmek istiyorsunuz?

var xmlHttp
function plannerSpin(str) {
    xmlHttp = GetXmlHttpObject()
    if (xmlHttp == null) {
        alert("Browser does not support HTTP Request")
        return
    }
    var url = "/recipes/planner/data"
    xmlHttp.onreadystatechange = stateChanged
    xmlHttp.open("GET", url, true)
    xmlHttp.send(null)
}
function stateChanged() {
    if (xmlHttp.readyState == 4 || xmlHttp.readyState == "complete") {
        document.getElementById("recipe_planner_container").innerHTML = xmlHttp.responseText
    }
}
function GetXmlHttpObject() {
    var xmlHttp = null;
    try {
        // Firefox, Opera 8.0+, Safari
        xmlHttp = new XMLHttpRequest();
    } catch (e) {
        // Internet Explorer
        try {
            xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
        } catch (e) {
            xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
    }
    return xmlHttp;
}

2 Cevap

Pek çok yolu ... örneğin vardır: görüntü gizli olabilir:

<div id='loading' style='display:none'><img src='img.gif'></div>

ve en kısa sürede AJAX isteği başlatmak olarak gösteriyor:

document.getElementById('loading').style.display = 'inline';

Isteği tamamlandıktan sonra, sonra tekrar görüntüsünü gizlemek:

if (xmlHttp.readyState == 4 || xmlHttp.readyState == "complete"){
    document.getElementById('loading').style.display = 'none';
    document.getElementById("recipe_planner_container").innerHTML = xmlHttp.responseText;
}

Veya, jQuery, Prototype, Mootools, ya da ne JS kitaplık istediğiniz kullanabilirsiniz.

Bye!

Sen plannerSpin başında yükleme gif eklemek ve stateChanged fonksiyonu kaldırabilirsiniz. Gibi somethig:

var img;
function plannerSpin(str) {
    img=document.createElement("img");
    img.src="image/path";
    //Here you can set some style for the image like an absolute position
    document.body.appendChild(img);
    ....
}


function stateChanged() {
    ...
    document.body.removeChild(img);
}

etiketler