php / Ajax - ön yükleme görüntüleri için en iyi uygulama

4 Cevap php

Ben çok Flickr fotoğraf özelliği gibi bir komut dosyası bir araya getirdik. Birbirinizi yanındaki küçük, ve bir sonraki (veya önceki) iki görüntüleri Soğuk içeri slayt sonraki veya önceki bağlantıları tıkladığınızda!

Sayfa yüklediğinde Şu anda iki görüntü yükler. İlk kez nxt / prv ardından sonraki iki görüntü bir ya da iki url geçirilen ilk görüntünün kimliği ve iki yeni görüntüler için HTML, ajax yüklenen önceki döndü ve ajax ile görüntülenir kullanılır.

Yeterince basit, ama yavaş bir bağlantı veya ağır sunucu yük, düşünme beni sonra iki görüntü, nispeten küçük minyatür hala yüklemek için bir süre alabilir ve sürgülü bölmeleri ile güzel şeyler gerçektir rağmen bu gizli veri Bir yükleme gecikme olmadan hızlı ve sorunsuz preferbly kayar.

Yani bir performans ve en iyi seçenek olan bakış iyi uygulama noktasından merak ediyordum, bu önerilere açık, şimdi ben düşünüyorum budur.

1, JSON ile görüntü her set çağrı (onun hızlı olması gerekiyordu?)

2, bir json dosyası içine tüm olası görüntüleri yüklemek ve ayrıntıları bu şekilde çekin - tarayıcı hala görüntü yüklemek zorunda rağmen. Artı, bazen 4 görüntü, diğer zamanlar 1000 kadar var olabilir olabilir!

3, bir Json veya başka bir dosya içine php aracılığıyla 10 resimler yükleyin ve gösteri değil 8 gizleme tarayıcı içine 10 görüntü yüklemek ve her orta ikisini gösteren. Burada sorun tıklandığında her zaman, dosya herhalde rağmen hala orta görüntüleri tüm olsa artık tarayıcı üzerinden önbelleğe alınmış olacak, zaman alır, ilk ve son görüntüleri, yeniden sahip olmasıdır. Ama yine de bir yükleme süresi var.

4, tüm görüntü detayları (ne olursa olsun sayı) ile bir json bir görüntü var ve bu görüntülerin 10 yüklemek için yukarıdaki hiçbir 3'ü kullanmak mümkün mü, sadece 10 satırları okumak için ajax kullanmak ve son bir işaretçi tutmak mümkündür bir o okumak, böylece json dosyası hızlı, kısa yenileme ve görüntüleri iki tarafında yüklenebilir tarayıcı üzerinden önbelleğe alınmış!

Umut şu açık, bu nasıl ele herhangi bir öneriniz?

4 Cevap

Javascript bir görüntü önyükleneceği, AJAX veya JSON gibi geliyor bir şey yapmanız gerekmez. Tüm ihtiyacınız şudur:

var img = new Image();
img.src = "http://example.com/new/image.jpg";

Tarayıcı oldukça mutlu her yerde görüntülenen değil olsa bile, arka planda resim yüklemek. Sonra, başka bir (görüntülenen) resim etiketi src alanını güncelleştirmek zaman, tarayıcı hemen zaten (o umarım bütün) yüklenir görüntünün bir kısmını gösterecektir.

Getiriliyor JSON Via Ajax sadece sizi yavaşlatacaktır.

Sen inline JSON kullanarak ve Javascript oluşturulan daha iyiyiz.

 <?php 
       $images = array( "foo.jpg","bar.jpg" ); 
 ?>
 <script type="text/javascript">
   jQuery(function($){
       var images = ( <?php echo json_encode($images); ?> ); 
       /* Creating A Hidden box to preload the images into */
       var imgbox = document.createElement("div"); 
       $(imgbox).css({display: 'none'});
       /* Possible Alternative trick */
       /* $(imgbox).css({height:1px; width: 1px; overflow: hidden;}); */
       $('body').append(imgbox);

       $.each( images , function( ind, item ) 
       {
          #Injecting images into the bottom hidden div. 
          var img = document.createElement("img"); 
          $(img).src("/some/prefix/" + item ); 
          $(imgbox).append(img);
       });
    }); 
 </script>

Eğer concurrently kaynakların daha çok sayıda önceden yüklemek istediğiniz durumda, küçük bir ajax sizin için sorunu çözebilir. Sadece önbelleğe alma başlıkları tarayıcı sonraki istek üzerine kaynaklarını kullanacak olması gibi olduğundan emin olun. Aşağıdaki örnekte, aynı anda dört kaynaklarına kadar yük.

<script>
var urls = [
  "a.png",
  "b.png",
  "c.png",
  "d.png",
  "e.png",
  "f.png"
];

var currentStep = 0;
function loadResources()
{
  if(currentStep<urls.length){
  var url = urls[currentStep];
  var req = GetXmlHttpObject();
  update('loading ' + url);
  req.open("GET", url, true);
  req.onreadystatechange = getUpdateState(req, url);
  req.send(null);
} else {
  window.location = 'done.htm';
}
}

function getUpdateState(req, url) {
  return function() {
    var state = req.readyState;
    if (state != 4) { return; }
    req = null;
    setTimeout('loadResources()', 0);
  }
}
</script>

<!-- This will queue up to four concurrent requests.  Modern browsers will request up to eight images at time  -->
<body onload="javascript: loadResources(); loadResources(); loadResources(); loadResources();">

Neden (500 resim ve daha fazla kadar ajax ile gerçekten güzel bir php çalışır) metni kullanın ve bir resim kodu ile metnin yerine değil?

etiketler