2016-07-20 60 views
0

我想使用jquery ajax()加載另一個外部頁面的兩個子內容。但是在加載主要內容之前,我希望在加載時間期間出現預加載器,然後只有主要內容必須出現。我已經提供了下面的代碼。請幫助我如何去做。使用jquery.ajax提取另一個頁面的子div div()

$.ajax({ 
 
    url: 'notification.html', 
 
    beforeSend: function(data) { 
 
    $('#content-here').html(data); 
 
    }, 
 
    dataType: 'html', 
 
    success: function(data) { 
 
    setTimeout(function() { 
 
     $('#content-here').html(data); 
 
    }, 2000); 
 
    } 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="preloader-wrapper big active" id="loader"> 
 
    <div class="spinner-layer spinner-blue-only"> 
 
    <div class="circle-clipper left"> 
 
     <div class="circle"></div> 
 
    </div> 
 
    <div class="gap-patch"> 
 
     <div class="circle"></div> 
 
    </div> 
 
    <div class="circle-clipper right"> 
 
     <div class="circle"></div> 
 
    </div> 
 
    </div> 
 
</div> 
 

 
<h2 style="color:black;">Notification</h2>

+1

你自己寫的代碼或你有一個任務,並試圖作弊?你怎麼了? – Leo

+1

你是什麼意思? –

+0

DOM – Rayon

回答

0

試試這個:

$.ajax({ 
    url: 'notification.html', 
    beforeSend: function(data) 
    { 
    // show ur loading indicator here 
    }, 
    dataType: 'html', 
    success: function(data) { 
    // hide the loader & append the data to your resulting div 
    } 
}); 
+0

我已經做到了。你可以看看代碼。我想要一個代碼來捕捉該HTML頁面的div的id。 –

0

HTML:

<h2 style="color:black;">Notification</h2> 



<div id="fountainTextG" style="display:none;"><div id="fountainTextG_1" class="fountainTextG">L</div><div id="fountainTextG_2" class="fountainTextG">o</div><div id="fountainTextG_3" class="fountainTextG">a</div><div id="fountainTextG_4" class="fountainTextG">d</div><div id="fountainTextG_5" class="fountainTextG">i</div><div id="fountainTextG_6" class="fountainTextG">n</div><div id="fountainTextG_7" class="fountainTextG">g</div></div> 

CSS:

#fountainTextG{ 
    width:234px; 
    margin:auto; 
} 

.fountainTextG{ 
    color:rgb(0,0,0); 
    font-family:Arial; 
    font-size:24px; 
    text-decoration:none; 
    font-weight:normal; 
    font-style:normal; 
    float:left; 
    animation-name:bounce_fountainTextG; 
     -o-animation-name:bounce_fountainTextG; 
     -ms-animation-name:bounce_fountainTextG; 
     -webkit-animation-name:bounce_fountainTextG; 
     -moz-animation-name:bounce_fountainTextG; 
    animation-duration:2.09s; 
     -o-animation-duration:2.09s; 
     -ms-animation-duration:2.09s; 
     -webkit-animation-duration:2.09s; 
     -moz-animation-duration:2.09s; 
    animation-iteration-count:infinite; 
     -o-animation-iteration-count:infinite; 
     -ms-animation-iteration-count:infinite; 
     -webkit-animation-iteration-count:infinite; 
     -moz-animation-iteration-count:infinite; 
    animation-direction:normal; 
     -o-animation-direction:normal; 
     -ms-animation-direction:normal; 
     -webkit-animation-direction:normal; 
     -moz-animation-direction:normal; 
    transform:scale(.5); 
     -o-transform:scale(.5); 
     -ms-transform:scale(.5); 
     -webkit-transform:scale(.5); 
     -moz-transform:scale(.5); 
}#fountainTextG_1{ 
    animation-delay:0.75s; 
     -o-animation-delay:0.75s; 
     -ms-animation-delay:0.75s; 
     -webkit-animation-delay:0.75s; 
     -moz-animation-delay:0.75s; 
} 
#fountainTextG_2{ 
    animation-delay:0.9s; 
     -o-animation-delay:0.9s; 
     -ms-animation-delay:0.9s; 
     -webkit-animation-delay:0.9s; 
     -moz-animation-delay:0.9s; 
} 
#fountainTextG_3{ 
    animation-delay:1.05s; 
     -o-animation-delay:1.05s; 
     -ms-animation-delay:1.05s; 
     -webkit-animation-delay:1.05s; 
     -moz-animation-delay:1.05s; 
} 
#fountainTextG_4{ 
    animation-delay:1.2s; 
     -o-animation-delay:1.2s; 
     -ms-animation-delay:1.2s; 
     -webkit-animation-delay:1.2s; 
     -moz-animation-delay:1.2s; 
} 
#fountainTextG_5{ 
    animation-delay:1.35s; 
     -o-animation-delay:1.35s; 
     -ms-animation-delay:1.35s; 
     -webkit-animation-delay:1.35s; 
     -moz-animation-delay:1.35s; 
} 
#fountainTextG_6{ 
    animation-delay:1.5s; 
     -o-animation-delay:1.5s; 
     -ms-animation-delay:1.5s; 
     -webkit-animation-delay:1.5s; 
     -moz-animation-delay:1.5s; 
} 
#fountainTextG_7{ 
    animation-delay:1.64s; 
     -o-animation-delay:1.64s; 
     -ms-animation-delay:1.64s; 
     -webkit-animation-delay:1.64s; 
     -moz-animation-delay:1.64s; 
} 




@keyframes bounce_fountainTextG{ 
    0%{ 
     transform:scale(1); 
     color:rgb(0,0,0); 
    } 

    100%{ 
     transform:scale(.5); 
     color:rgb(255,255,255); 
    } 
} 

@-o-keyframes bounce_fountainTextG{ 
    0%{ 
     -o-transform:scale(1); 
     color:rgb(0,0,0); 
    } 

    100%{ 
     -o-transform:scale(.5); 
     color:rgb(255,255,255); 
    } 
} 

@-ms-keyframes bounce_fountainTextG{ 
    0%{ 
     -ms-transform:scale(1); 
     color:rgb(0,0,0); 
    } 

    100%{ 
     -ms-transform:scale(.5); 
     color:rgb(255,255,255); 
    } 
} 

@-webkit-keyframes bounce_fountainTextG{ 
    0%{ 
     -webkit-transform:scale(1); 
     color:rgb(0,0,0); 
    } 

    100%{ 
     -webkit-transform:scale(.5); 
     color:rgb(255,255,255); 
    } 
} 

@-moz-keyframes bounce_fountainTextG{ 
    0%{ 
     -moz-transform:scale(1); 
     color:rgb(0,0,0); 
    } 

    100%{ 
     -moz-transform:scale(.5); 
     color:rgb(255,255,255); 
    } 
} 

SCRIPT:

$.ajax({ 
    url: 'notification.html', 
    beforeSend: function(data) { 
    $("#fountainTextG")[0].style.display="inline"; 
    }, 
    dataType: 'html', 
    success: function(data) { 

    setTimeout(function() { 
     $('#content-here').html(data);}, 5000); 
    } 
    $("#fountainTextG")[0].style.display="none"; 
}); 

寫這個代碼到你的頁面顯示加載文本

相關問題