jQuery Put loading image auf meiner Registerkarte

Ich habe jQuery Registerkarte und jetzt möchte ich einfach laden Bild hinzufügen, aber verwirrt, wo zu setzen und wie zu setzen?jQuery Put loading image auf meiner Registerkarte

Hier ist meine JS-Code:

$('[data-toggle="tabajax"]').click(function(e) 
{ 
    localStorage.setItem('lastTab', $(this).attr('href')); 

    var $this = $(this), 
     loadurl = $this.attr('href'), 
     targ = $this.attr('data-target'); 

    $.get(loadurl, function(data) { 
     $(targ).html(data); 
    }); 

    $this.tab('show'); 
    return false; 
}); 

var lastTab = localStorage.getItem('lastTab'); 
if(lastTab) 
{ 
    $('[href="' + lastTab + '"]').tab('show').trigger('click'); 
} 
else 
{ 
    $('#userDetailsTab').trigger('click'); 
}

HTML

<ul class="nav nav-tabs tabs-up" id="friends"> 
    <li><a href="userDetails" data-target="#userDetails" class="media_node active span" id="userDetailsTab" data-toggle="tabajax"> User Details </a></li> 
    <li><a href="userGroups" data-target="#userDetails" class="media_node span" id="friends_list_tab" data-toggle="tabajax"> Group</a></li> 
    <li><a href="userGroupAccess" data-target="#userDetails" class="media_node span" id="awaiting_request_tab" data-toggle="tabajax">Group Access</a></li> 
</ul> 

<div class="tab-content"> 
    <div id="loading"><img src="assets/img/processing.gif"/></div> 
    <div class="tab-pane active" id="userDetails"></div> 
</div>

So wie kann ich diesen Satz, wenn noch zeigen Lade Bild geladen und afer Seite geladen dann das Laden Bild auszublenden.

Quelle

2017-02-20 HiDayurie Dave

Sie können das erste, was Sie tun, wenn Sie Ihre Website laden, ein großes Spinner-Sprite über die gesamte Webseite aufstellen und nach dem Laden jQuery verwenden, um es zu entfernen. –

@SimonHyll Bitte teilen Sie mir Ihren Trick. :) –

Hier ist der angeforderte jQuery-Trick. Beachten Sie, dass Sie es entsprechend anpassen müssen, aber etwas wie dieses würde ein riesiges Spinner auf der ganzen Webseite erscheinen lassen und sobald Ihre JavaScript-Funktionen ihr Ende erreicht haben, wird es entfernt und Ihre fertige Webseite wird angezeigt.

// Then call this function at the end of your loading sequence 
 
//$("#wrapper").remove();

body { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
.loader { 
 
    border: 16px solid #f3f3f3; /* Light grey */ 
 
    border-top: 16px solid #3498db; /* Blue */ 
 
    border-bottom: 16px solid #3498db; 
 
    border-radius: 50%; 
 
    width: 120px; 
 
    height: 120px; 
 
    animation: spin 2s linear infinite; 
 
    width: 3cm; 
 
    height: 3cm; 
 
    position: relative; 
 
    left: calc(50% - 1.5cm); 
 
    top: calc(50% - 1.5cm); 
 
} 
 

 
@keyframes spin { 
 
    0% { transform: rotate(0deg); } 
 
    100% { transform: rotate(360deg); } 
 
} 
 

 
#wrapper { 
 
    position: fixed; 
 
    z-index: 99999999999999; 
 
    top:0; 
 
    width: 100vw; 
 
    height: 100vh; 
 
    padding: 0; 
 
    margin: 0; 
 
    background: #ddd; 
 
}

<html> 
 
<head> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
</head> 
 
<body> 
 
<h1>YOU CANT SEE ME</h1> 
 
<div id="wrapper"> 
 
<div class="loader" id="mySpinner"></div> 
 
</div> 
 
</body> 
 
</html>

Beachten Sie, dass mit etwas Herumprobieren Sie diese Lösung über platziert werden machen können, was auch immer Teil Ihrer Webseite, die Sie möchten, können Sie auch jQuery verwenden, um die Spinner über ein vorhandenes Element hinzufügen zu füllen Das übergeordnete Element ersetzt nur einen Teil Ihrer Seite durch ein Spinner, bis Sie die remove() -Funktion aufrufen.

Quelle

2017-02-20 02:28:51

jQuery Put loading image auf meiner Registerkarte

Antwort

Verwandte Themen