Ajax / jquery tekniği ile sayfa içeriğini önceden yüklemek mümkün mü?

6 Cevap php

Bu içeriği tam yüklü ve daha sonra kullanıcı / ziyaretçi için görüntülenen kadar (bir çubuk yükleme / animasyonlu gif .. veya yükleme metnini gösteren gibi ..) tüm sayfa içeriğini önceden yüklemek mümkün mü? Bu mümkün değilse, bunu başarmak için takip etmek bana sadece yönergeleri veya kaynakları verebilirsiniz. Ben kolayca görüntü preloaders bulmak mümkün, ama ben görüntülenmeden önce sayfadaki tüm içeriği preload bir ayarlar tekniği için aradığım için.

6 Cevap

Sadece none için sayfanın sarıcı div display set, Ajax ya da bir şey kullanmaya gerek yok. sonra document yüklendiğinde engellemek için değiştirin. kod ham Javascript kullanarak, bu gibi olabilir:

...
<script type="text/javascript">
        function preloader(){
            document.getElementById("preloader").style.display = "none";
            document.getElementById("container").style.display = "block";
        }//preloader
        window.onload = preloader;
</script>
<style>
...
div#wrapper {
    ...
    display: none;
    }

div#preloader {             
    top: 0; right: 10px;
    position:absolute;
    z-index:1000;
    width: 132px; height: 38px;
    background: url(path/to/preloaderBg.png) no-repeat;
    cursor: wait;
    text-shadow: 0px 1px 0px #fefefe;  //webkit                 
    }
...
</style>
...
<body>
    <div id="preloader">Loading... Please Wait.</div>
    <div id="wrapper">
        <!-- page contents goes here -->
    </div>
</body>
...

Eğer jQuery bu gerekiyorsa, yorum yapmaktan çekinmeyin.

update, jQuery:

...
<script type="text/javascript">
    //use $(window).load(fn) if you need to load "all" page content including images, frames, etc.
    $(document).ready(function(){ 
        $("#preloader").hide();
        $("#container").show();
    });
</script>
...

İlgili belgeler: Etkinlikler / ready, Etkinlik / load, CSS / css & Çekirdek / $

Eğer tam sayfa yüklenene kadar içeriği gizli olan bir yöntemi seçerseniz, başlangıçta JavaScript sonra unhidden CSS gizli yoktur. Bunu yaparsanız, JavaScript ile herkes engelli veya kullanılamıyor hiç sayfa alacaksınız. Bunun yerine, script gizleme ve gösteren de var.

<body>
    <script type="text/javascript">
        document.body.style.visibility= 'hidden';
        window.onload= function() { document.body.style.visibility= 'visible'; };
    </script>

Ayrıca dönem 'preloader' Burada ne yaptığınızı gerçekten doğru olmadığını unutmayın. 'Ön' Eğer ihtiyaç duyduğunuz zaman gitmeye hazır olduğunu böylece sayfa getirilen ve önbelleğe alarak performansı artan konum anlamına gelir.

Ama aslında bu tam tersidir: kısmi içerik mevcut olduğunda sayfa yüklenirken iken kullanıcı hiçbir şey göstermiyor çevresinde bekleyerek o decreases performansı. Ilerici render yenebilmek daha hızlı, daha yavaş değil tarama yapar. Genellikle belirgin Yanlış Thing, ve normal tarayıcı ilerici render gidiyor birkaç niş durumlar dışında en iyisidir. Bu web nasıl işliyor; insanlar artık kendisine kullanılmaktadır.

(İnsanlar, bu gerçekten web ancak şirketin sitesi kerede tüm görünen bu talebi kullanın ya anlamıyorum zekalı yönetim türlerinin tür dışında.)

Ben bir resim tam dolu iken bilmeniz gereken bir şey yaptım, bu yüzden $.get() fonksiyonu ile önceden yüklenmelerini yaptım ve son parametre olarak bir geri çağırma işlevi geçti. Görüntü aslında indirilen Bu şekilde, benim geri ateş ediyorum ve tarayıcı zaten önbelleği görüntü vardı olduğunu bilemez.

Eğer bunu önyükleneceği söylemek her resim için global bir değişken artacaktır, ve sonra geri sayaç azaltma bir işlev yazabilirsiniz. Sayaç sıfıra olduğunda, başka bir işlevi çağırabilir. Bu işlev artık tüm görüntüleri önceden bir kez patlayacaktır.

Bu resimler içindir. Her şey $ (document). Ready () ateş olduğu zaman yüklenecek garanti edilebilir. Eğer bu noktada rutin başlamak Yani, sayfada her şey yüklü olmalıdır.

En iyi yolu

function ajax(){
$('#wapal').html('path to image');
$.ajax({
      url:'somfile.php',
         method:'get',
         success:function(data){
         if(data =='') return;
         $('#wapal').html(data);
       }
    });
}

Kolayca jquery ile yapabilirsiniz.

SCRIPT


$(window).load(function() {
     $('#preloader').fadeOut('slow', function() { $(this).remove(); });
});

STYLES


div#preloader {
   position: fixed;
   z-index: 999;
   width: 100%;
   height: 100%;
   background: #c6d6c2 url(ajax-loader.gif) no-repeat center center;
 }

HTML 

div id="preloader"

Some modifications to DMus -Jerad Answer as it does't work when adsense is on the page.

Kolayca jquery ile yapabilirsiniz.

SCRIPT

$(document).ready(function() {
     $('#preloader').fadeOut('slow', function() { $(this).remove(); });
});

STYLES

div#preloader {
   position: fixed;
   z-index: 999;
   width: 100%;
   height: 100%;
   background: #c6d6c2 url(ajax-loader.gif) no-repeat center center;
 }

HTML

div id="preloader"

etiketler