عرض شرائح جافا سكريبت الديناميكي

Question

لدي عرض شرائح JavaScript يقوم بتحميل الصور مسبقًا من قاعدة بيانات MySQL ثم يعرضها واحدة تلو الأخرى في علامة صورة في مستند HTML.باختصار، يتم تحقيق ذلك عن طريق التحميل المسبق للصور مثل العديد من البرامج التعليمية لعرض الشرائح التي تظهر على الويب، ولكن بدلاً من استخدام الصور الثابتة (أي الصور الثابتة).image1.jpg وما إلى ذلك) يستخدم صورة ديناميكية مقدمة عبر PHP (أي.getData.php?n=1) يعمل البرنامج النصي getData.php على الخادم ويفتح اتصالاً جديدًا بقاعدة البيانات لكل صورة تم تحميلها مسبقًا.

هل هناك أي طريقة لتجنب إجراء العديد من الاتصالات بقاعدة البيانات وجعل كل اتصال يقوم بإجراء استعلام واحد فقط في قاعدة بيانات الصور باستخدام LIMIT n,1؟

يبدو أنني إذا كنت سأستخدم getData.php باعتباره image.src، فسيحتاج getData.php إلى إرجاع صورة واحدة في كل مرة!أرغب حقًا في جلبها في مجموعات مكونة من 10 ثم تعيينها لكائنات Image() واحدًا تلو الآخر من جانب العميل.أعتقد أن هذا سيكون أسرع لأنني عندما كتبت تطبيق عميل بلغة python لعرض الصور (خارج المتصفح بالطبع) تم نقل كتل مكونة من 10 أو نحو ذلك بشكل أسرع بكثير (ويقلل الحمل على خادم mySQL).هل يمكنني تحقيق ذلك باستخدام JavaScript وPHP؟هل أستخدم XML بينهما؟إذا كان بإمكاني إدخال بيانات الصورة الثنائية إلى JavaScript باستخدام AJAX، فهل يمكنني فعل أي شيء بها؟هناك imagecreatefromstring() وظيفة في جافا سكريبت التي أفتقدها؟

يمكنني اكتشاف التعليمات البرمجية الدقيقة بنفسي، لكنني جديد في برمجة الويب وأحتاج إلى نصيحة حول كيفية معالجة هذه المشكلة!أعتقد أنني أفتقد جزءًا من الإطار الرئيسي.هل أحتاج إلى ActionScript أو أي شيء آخر غير JavaScript لهذه المشكلة؟شكرا لهذه النصيحة مقدما!

يحرر:يعجبني هذا الاقتراح الأول وأعتقد أنه يمكنني تنفيذه.سيمكنني أيضًا من متابعة جزء من اقتراح Alex shishkin لتجنب استعلامات LIMIT n,1 (أريد الاحتفاظ بحقول SQL BLOB بالرغم من ذلك) ولكن كيف يمكنني لصق البيانات الثنائية من XML في كائن Image() في JavaScript؟

Answer 1

أود أن أقول:

• اطلب من getData.php إنشاء ملف XML يحتوي على الصور العشرة التالية.
• احصل على جافا سكريبت للحصول على استجابة XML من طلب AJAX إلى getData.php.
• قم باجتياز الصور في استجابة XML واحدة تلو الأخرى وعندما يتم عرض الصور التاسعة، قم بالاستعلام عن getData.php للمجموعة التالية من الصور.

أما بالنسبة للإطار:نصيحتي هي استخدام JQuery لكل من طلب AJAX وعرض الصورة والتحميل المسبق.

---

يمكنك استخدام ترميز ثنائي إلى نص مثل base64 لتمرير البيانات الثنائية عبر XML.في معظم المتصفحات، يمكنك استخدام فك تشفير base64 بمفرده وتمريره إلى كائن صورة كما يلي:

<img src="data:image/jpeg;base64,your binary data comes here">

سيعمل هذا في جميع الأجهزة باستثناء Internet Explorer، يمكنك استخدام ملف خدعة متقنة بواسطة Dean Edwards لتمرير بيانات base64 مرة أخرى إلى وحدة PHP لـ IE :)

استخدام JQuery وPHP للحصول على صورة بسيطة (لا توجد عروض شرائح...كان هذا مجرد رمز الاختبار الخاص بي) يبدو الرمز كما يلي:

بي أتش بي:

<?php
   echo base64_encode(file_get_contents("image.jpg"));
?>

شبيبة / مسج:

$(document).ready( function() {
   $.get( "image.php", function( data ) {
      $(document).append("<img src=\"data:image/jpeg;base64,"+ data +"\">");
   });
});

Answer 2

<ع> استخدام الصور ثنائية و"الحد ن 1" - حلول سيئة للغاية

لماذا لم صورك لا يتم تخزينها في قاعدة بيانات وصلات إلى الصور؟ ويجب أن الصور المخزنة على نظام الملفات. استعلامات مثل "ن الحد (1)،" حقا بطيئة للغاية، ولا سيما على جداول كبيرة. كنت بحاجة إلى استخدام الاستفسارات الصغيرة مع الكبيرة تعويض بدلا العديد من الاستعلامات مع الصغيرة تعويض وحزمة البيانات في بي إلى تنسيق سلمان للإرسال إلى جافا سكريبت. (لحد 100 على سبيل المثال) إرسال طلب اياكس للصور واحدة في بإسراف شديد للغاية.

ونيس عرض الشرائح يمكنك العثور هنا - plugins.jquery.com

Answer 3

1. إنشاء صفحة ويب.
2. اسمح للصفحة بالاتصال بالخادم والحصول على XML أو JSON مع معرفات الصور.
3. اطلب الصور من الخادم باستخدام المعرف من الخطوة 2.