كيف تلعب صور متحركة على onClick

يعد Animated GIF طريقة شائعة لتصور مفهوم التصميم (إليك مثال على كيفية قيامنا بتأثيرات نص المنشور التي تم إنشاؤها باستخدام CSS) أو إظهار مقطع فيديو قصير. ولكن إذا كان لديك الكثير منهم في نفس الصفحة ، فسيؤدي ذلك إلى تحريف تركيز المستخدم. بالنسبة إلى الصفحات التي تعرض الكثير من صور GIF ، فهذه أخبار سيئة.

الحل: تقديم خدمة للمستخدمين مع صورة ثابتة والسماح فقط بتشغيل GIF المتحركة عند النقر فوق المستخدم. سنشرح لك في هذا البرنامج التعليمي القصير كيفية القيام بذلك.

• عرض تجريبي
• تحميل المصدر

ابدء

ابدأ في إعداد مجلدات وملفات المشروع التي تتضمن: ملف HTML ، و jQuery ، وأخيرًا ملف JavaScript حيث سنكتب رمزنا. يمكنك ربط مسج إلى CDN أو الاستيلاء على نسخة وربطها إلى دليل المشروع الخاص بك. وأود أن أترك الأنماط و CSS لخيالك. الجزء الأكثر أهمية هو ترميز HTML كما يلي:

لاحظ إضافية بيانات بديل السمة في IMG جزء. هذا هو المكان الذي نقوم بتخزين GIF فيه ، بدلاً من الصورة الثابتة التي نعرضها في البداية. يمكنك إضافة المزيد من الصور وإضافة تعليق لكل منها عبر figcaption جزء.

بعد ذلك ، سنكتب JavaScript التي ستجلب السحر. الفكرة هي خدمة صورة GIF عندما ينقر المستخدم على الصورة.

جافا سكريبت

أولاً ، نقوم بإنشاء وظيفة من شأنها استرداد مسار صورة GIF الذي وضعناه في بيانات بديل صفة، عزا. سوف ندور في كل صورة ونستخدمها jQuery .البيانات() طريقة للقيام بذلك:

 var getGif = function () var gif = []؛ $ ('img'). كل (function () var data = $ (this) .data ('alt')؛ gif.push (data)؛)؛ العودة gif.  var gif = getGif ()؛

نقوم بتشغيل الوظيفة وحفظ الإخراج في متغير GIF, على النحو الوارد أعلاه. ال GIF يحتوي المتغير الآن على مسار GIF من الصور الموجودة في الصفحة.

الصورة قبل التحميل

لدينا الآن مشكلة في التحميل: نظرًا لعدم تحميل GIF بعد ، فهناك احتمال ألا يتم تشغيل GIF المتحركة على الفور (نظرًا لأن المتصفح سيحتاج إلى بضع ثوان لتحميل GIF بالكامل). سيشعر هذا التأخير بدرجة أكبر عندما يكون حجم صورة GIF كبيرًا.

نحتاج إلى التحميل المسبق لـ GIF أو تحميله في وقت واحد أثناء تحميل الصفحة.

 // التحميل المسبق لجميع GIF. فار صورة = [] ؛ $ .each (gif ، function (index) image [index] = صورة جديدة () ؛ image [index] .src = gif [index]؛) ؛

الآن ، افتح DevTools ثم توجه إلى شبكة الاتصال (أو مصادر) التبويب. ستلاحظ أن ملفات GIF تم تحميلها بالفعل على الرغم من حفظها في بيانات بديل صفة، عزا. وفيما يلي كل رمز تحتاج إلى القيام بذلك.

آخر جزء من الشفرة هو المكان الذي نربط فيه كل منهما الشكل العنصر الذي يلتف الصورة مع انقر هدف.

سوف رمز مبادلة مصدر الصورة بين SRC السمة حيث يتم تقديم صورة ثابتة و بيانات بديل السمة حيث نخدم في البداية صورة GIF.

سيعود الرمز أيضًا إلى الصورة الثابتة حيث ينقر المستخدم مرة ثانية, “وقف” الرسوم المتحركة.

 $ ('figure'). on ('click'، function () var $ this = $ (this)، index index = $ this.index ()، $ img = $ this.children ('img')، $ imgSrc = $ img.attr ('src') ، $ imgAlt = $ img.attr ('data-alt') ، $ imgExt = $ imgAlt.split ('.') ؛ إذا ($ imgExt [1] === 'gif') $ img.attr ('src'، $ img.data ('alt')). attr ('data-alt'، $ imgSrc)؛ آخر $ img.attr ('src'، $ imgAlt) .attr ('data-alt'، $ img.data ('alt'))؛)؛

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

تحقق من العرض وتحميل المصدر هنا.

• عرض تجريبي
• تحميل المصدر