2015-04-24 76 views
5

Yeni bir sayfa yüklenirken sayfayı canlandırmaya çalışıyorum. Buraya gitme efektim bu sitede kullanılan yönteme benzer. http://www.whitefrontier.ch/. Bir geliştiriciden daha çok tasarımcıyım, bundan dolayı şansım olmadı. Aşağıda, denediğim en doğru iki çözüm olduğunu düşünüyorum. Bu sitede, önyükleyici olarak fantezi kutusunu kullanıyorlar. İstediğiniz sonucu almak için fantezi kutusuna ihtiyacım var mı?Yeni sayfa önceden yüklendikten sonra bir sayfanın boşaltılması nasıl oluşturulur (jQuery)

$(window).load(function() { 
    $('a').animate({right: '250px'},"slow"); 
    }); 

$(window).on('beforeunload', function(){ 
    $('a').animate({right: '250px'},"slow"); 
}); 
+0

bu soruna için çok iyi bir kaynaktır: http://designhuntr.com/display-animation-while-page-loading-using-jquery/. Bu, sorununuza yaklaşmanın iki farklı yolunu gösterir. – BIW

+0

'fantezi kutusu' görüntüleri slayt gösterisi göstermek için kullanılır. –

cevap

0

$ .unload() kullanmak yerine, neden bir sayfa ön yükleyici kullanmıyorsunuz? Bu, büyük statik varlıkları (videolar veya büyük resimler gibi) yüklemesi gereken web sayfaları için yaygın bir tasarım deseni. Sen kurulum yapabilirsiniz böyle sayfanızı ön yükleyici:

//example js 
//Show your web page once all the assets are fully loaded 
$(window).load(function() 
{ 
    $('#preLoader').hide(); //Or whatever animation you want to remove the preloader 
    $('#pageWrapper').show(); //Or whatever animation you want to show the page 
}); 

<!-- Example HTML --> 
<div id="preLoader"> 
    <h1>Loading.....</h1> 
</div> 
<div id="pageWrapper" style="display:none;"> 
    [page content goes here] 
</div>