php/Ajax - أفضل ممارسة للتحميل المسبق للصور

Question

لقد قمت بتجميع برنامج نصي يشبه إلى حد كبير ميزة تدفق الصور على موقع Flickr.صورتان مصغرتان بجانب بعضهما البعض، وعندما تنقر على الروابط التالية أو السابقة، تنزلق الصورتان التاليتان (أو السابقتان).رائع!

حاليًا عند تحميل الصفحة تقوم بتحميل الصورتين.في المرة الأولى التي يتم فيها استخدام nxt / prv، يتم تحميل الصورتين التاليتين أو الصورتين السابقتين عبر ajax، مع تمرير معرف الصورة الأولى في عنوان url وإرجاع HTML للصورتين الجديدتين وعرضهما عبر ajax.

بسيطة بما فيه الكفاية، ولكنها جعلتني أفكر، في اتصال بطيء، أو تحميل خادم ثقيل ثم الصورتين، على الرغم من أن الصور المصغرة نسبيًا قد تستغرق بعض الوقت للتحميل، والأشياء الجميلة مع الأجزاء المنزلقة هي حقيقة أن البيانات المخفية ينزلق بسرعة وسلاسة ويفضل أن يكون ذلك دون تأخير في التحميل.

لذلك كنت أتساءل من وجهة نظر الأداء والممارسة الجيدة عن الخيار الأفضل، وهذا ما يمكنني التفكير فيه الآن، مفتوح للاقتراحات.

1، اتصل بكل مجموعة من الصور عبر JSON (من المفترض أن تكون سريعة؟)

2، قم بتحميل جميع الصور الممكنة في ملف json واسحب التفاصيل بهذه الطريقة - على الرغم من أن المتصفح سيظل بحاجة إلى تحميل الصورة.بالإضافة إلى أنه في بعض الأحيان قد يكون هناك 4 صور، وفي أحيان أخرى يمكن أن يصل إلى 1000!

3، قم بتحميل 10 صور عبر php في ملف Json أو أي ملف آخر، وقم بتحميل جميع الصور العشر في المتصفح لإخفاء الصور الثمانية غير المعروضة، وإظهار الصورتين الأوسطتين دائمًا.المشكلة هنا هي أنه في كل مرة ينقر فيها شخص ما، يجب على الملف إعادة تحميل الصورتين الأولى والأخيرة، الأمر الذي لا يزال يستغرق وقتًا، على الرغم من أنني أفترض أن الصور الوسطى سيتم تخزينها مؤقتًا عبر المتصفح الآن.ولكن لا يزال هناك وقت التحميل.

4، هل من الممكن الحصول على صورة json تحتوي على جميع تفاصيل الصورة (بغض النظر عن الأرقام) واستخدام الرقم 3 أعلاه لتحميل 10 من تلك الصور، هل من الممكن استخدام ajax لقراءة 10 أسطر فقط والاحتفاظ بمؤشر للأخير تمت قراءته، لذلك يمكن تحميل ملف json بسرعة، ويتم التحديث القصير ويتم تخزين الصور على كلا الجانبين مؤقتًا عبر المتصفح !!

نأمل أن يكون هذا واضحا، أي اقتراحات حول كيفية التعامل مع هذا؟

Answer 1

للتحميل المسبق لصورة من Javascript، لا تحتاج إلى القيام بأي شيء يبدو مثل AJAX أو JSON.كل ما تحتاجه هو هذا:

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

سيقوم المتصفح بتحميل الصورة في الخلفية بكل سرور، على الرغم من عدم عرضها في أي مكان.وبعد ذلك، عندما تقوم بتحديث src في حقل علامة صورة أخرى (معروضة)، سيعرض المتصفح على الفور الجزء من الصورة الذي تم تحميله بالفعل (نأمل أن يكون كله).

Answer 2

سيؤدي جلب JSON عبر Ajax إلى إبطائك.

من الأفضل لك استخدام JSON المضمّن وإنشاء Javascript.

 <?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>

Answer 3

في الحالة التي تريد فيها ذلك بشكل متزامن قم بتحميل عدد أكبر من الموارد مسبقًا، ويمكن لقليل من Ajax أن يحل المشكلة لك.فقط تأكد من أن رؤوس التخزين المؤقت بحيث سيستخدم المتصفح الموارد عند الطلب التالي.في المثال التالي، أقوم بتحميل ما يصل إلى أربعة موارد في وقت واحد.

<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();">

Answer 4

لماذا لا تستخدم النص وتستبدل النص برمز الصورة (يعمل بلغة php بشكل رائع مع ajax حتى 500 صورة وأكثر)؟