ein Bild vor Inhalt Lasten Zugabe mit Jquery

Question

Bitte ich einen Seiteninhalt auf einem div bin Laden, wenn ihre Verbindung so diesen Code leitet geklickt wird:

$(document).ready(function(){ 
    //loading the default content 
    $('#content').load('contents/index.php'); 

    //loading page content of a clicked link 
    $('#nav a').click(function(){ 
     page = $(this).attr('href'); 
     $('#content').load('content/'+page); 
     return false; 
    }); 
}); 

Jetzt muß ich vor dem Inhalt ein Lade Bild hinzufügen lädt ebenso wie die ajax

beforeSend: function(){ 
    $('#load_div').html('<img src="loading_image.gig" />'); 
}, 

Und um das Bild zu stoppen, nachdem der Inhalt

success: function(){ 
    $('#load_div').html(); 
}, 

So p Laden Leasing Wie erreiche ich das?

Answer 1

Sie können ajaxStart() Verfahren mit Verwendung eines Rückrufes im .load(url, fn) verwenden:

function ajaxDone(){ 
    // remove the loading image here 
    $('#load_div').html(''); // .empty(); // can also be used 
} 

$(document).ready(function(){ 
    //loading the default content 
    $('#content').load('contents/index.php', ajaxDone); //<---use here to remove 

    //loading page content of a clicked link 
    $('#nav a').click(function(){ 
     page = $(this).attr('href'); 
     $('#content').load('content/'+page, ajaxDone); //<---use here to remove 
     return false; 
    }); 

    /* 
    * Here you can use ajaxStart globaly when you have any async ajax call 
    * It will show a loading gif image. 
    */ 
    $(document).ajaxStart(function(){ 
     $('#load_div').html('<img src="loading_image.gig" />'); 
    }); 

}); 

Answer 2

Meine Lösung zu Jais sehr ähnlich, nur dass anstelle eines Bildes verwende ich einen Lader-Tag, das für einen Moment Schwarzen aus dem Bildschirm . Ich habe eine vollständige Demo unter this Codepen, aber der Code unten sollte gut genug funktionieren.

nutze ich die Dokumente ajaxSend und ajaxComplete globale Ereignisse, so werden diese Ereignisse jetzt Feuer für alle$.ajax() Anfragen, wenn Sie in dem Aufruf angeben, nicht die Ajax-Ereignisse auslösen.

$(document).ready(function() { 
 
    $(document).on('ajaxSend', function(e) { 
 

 
    if ($('.loader-wrapper').length == 0) { 
 
     var loader_wrapper = $('<div class="loader-wrapper"><div class="loader">&nbsp;</div></div>'); 
 
     console.log(loader_wrapper); 
 
     $(document.body).prepend(loader_wrapper); 
 
    } 
 

 
    $('.loader-wrapper').show(); 
 

 
    }).on('ajaxComplete', function() { 
 
    $('.loader-wrapper').hide(); 
 
    }) 
 

 
    $('#click-me').on('click', function() { 
 
    $('#results').load('http://codepen.io/jhechtf/pen/XdQdaN.html'); 
 
    }); 
 
});

.loader-wrapper { 
 
    overflow: none; 
 
    position: absolute; 
 
    margin: auto auto; 
 
    bottom: 0; 
 
    right: 0; 
 
    top: 0; 
 
    left: 0; 
 
    background-color: rgba(0, 0, 0, 0.3); 
 
} 
 
.loader { 
 
    margin: auto auto; 
 
    font-size: 10px; 
 
    position: relative; 
 
    text-indent: -9999em; 
 
    border-top: 1.1em solid rgba(0, 0, 0, 0.2); 
 
    border-right: 1.1em solid rgba(0, 0, 0, 0.2); 
 
    border-bottom: 1.1em solid rgba(0, 0, 0, 0.2); 
 
    border-left: 1.1em solid #000; 
 
    -webkit-animation: load8 1.1s infinite linear; 
 
    animation: load8 1.1s infinite linear; 
 
} 
 
.loader { 
 
    border-radius: 50%; 
 
    width: 10em; 
 
    height: 10em; 
 
} 
 
@-webkit-keyframes load8 { 
 
    0% { 
 
    -webkit-transform: rotate(0deg); 
 
    transform: rotate(0deg); 
 
    } 
 
    100% { 
 
    -webkit-transform: rotate(360deg); 
 
    transform: rotate(360deg); 
 
    } 
 
} 
 
@keyframes load8 { 
 
    0% { 
 
    -webkit-transform: rotate(0deg); 
 
    transform: rotate(0deg); 
 
    } 
 
    100% { 
 
    -webkit-transform: rotate(360deg); 
 
    transform: rotate(360deg); 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="results"> 
 
    Post stuff here 
 
</div> 
 
<button id="click-me">Click me</button>