كما ترى ، كل شيء بسيط. لكن ما الذي يجب أن تنتبه إليه؟ وتحتاج إلى الانتباه إلى div مع id = "smartPortfolio" و id = "moreButton" و id = "loadingDiv" ، حيث يتم استخدامها في البرنامج النصي ، مما يساعدنا في تحميل المحتوى من الصفحات الأخرى. SmartPortfolio هي "حاوية" لمحفظة أعمالنا. MoreButton - سيكون هذا هو زرنا ، عند النقر فوقه ، يتم تحميل جزء آخر من المحفظة. LoadingDiv - المنطقة التي سيتم عرض النص فيها عند فتح المحفظة بالكامل ، أو عند حدوث نوع من الخطأ.

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

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

بالنسبة لأولئك الذين يخططون لإجراء تغييرات ، إليك النص نفسه:

var lazyload = lazyload || () ؛ (function ($، lazyload) ("use strict"؛ var page = 2، buttonId = "#moreButton"، loadingId = "#loadingDiv"، container = "#smartPortfolio"؛ lazyload.load = function () (var url = "./pages/" + page + ".html" ؛ $ (buttonId) .hide () ؛ $ (loadingId) .show () ؛ $ .ajax ((url: url ، Success: function (response) (if ( ! response || response.trim () == "NONE") ($ (buttonId) .fadeOut ()؛ $ (loadingId) .text ("Portfolio محملة بالكامل")؛ return؛) appendContests (response)؛)، خطأ: function (response) ($ (loadingId) .text ("عذرًا ، حدث خطأ ما في الطلب. يُرجى تحديث الصفحة.") ؛))) ؛) ؛ var appendContests = function (response) (var id = $ (buttonId) ؛ $ (buttonId) .show () ؛ $ (loadingId) .hide () ؛ $ (response) .appendTo ($ (container)) ؛ الصفحة + = 1 ؛) ؛)) (jQuery ، lazyload) ؛

لذا ، من الجدير الحديث الآن عن تلك الملفات التي سنقوم بتحميل المعلومات منها. يفترض النص أن هذه ستكون ملفات بأسماء 2.html… 5.html ، إلخ. الذي يحتوي على معلوماتنا. على سبيل المثال ، يتم تحميل ملف 2.html أولاً ويحتوي على المحتوى التالي:

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

تم تحديد المسار في البرنامج النصي على النحو التالي:

Var url = "./pages/" + page + ".html" ؛

إذا كنت تخطط لاستخدام مسار مختلف ، فتأكد من استبداله في البرنامج النصي. بالإضافة إلى ذلك ، إذا استخدمت معرفات أخرى ، فسيتعين إعادة تعريفها في البرنامج النصي. هنا:

ButtonId = "#moreButton" ، loadingId = "#loadingDiv" ، الحاوية = "#smartPortfolio" ؛

وكما قلت ، قبل علامة إغلاق النص ، نقوم بتضمين النص نفسه:

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

في عام 2011 ، كان من المألوف جدًا (في رأيي ، جاءت هذه الطريقة من Facebook) القيام بـ "التمرير اللانهائي" على مواقعهم: هذا عندما يلف المستخدم ويدير عجلة الماوس ، ويتم تحميل جميع نتائج البحث الجديدة بواسطة Ajax على أسفل الصفحة ، مما يحول التمرير العادي إلى ما لا نهاية ويسبب "تنافرًا معرفيًا" لدى المستخدم الذي واجهه للمرة الأولى.

كما رأيت مؤخرًا مقالًا على هذا الموقع أعرب فيه المؤلف عن عدم رضاه عن "التمرير اللانهائي" ودعا إلى استخدام "ترقيم الصفحات" القديم الجيد.

وأنا أتفق مع الكاتب. أنا نفسي مدمن مخدرات ، وأحيانًا أجلس على الشاشة كما لو كنت مسحورًا ، بعيون زجاجية ، أدير العجلة السحرية ، غير قادر على الذهاب إلى العمل / العمل / إلى المتجر / تناول الطعام / الشراب / إلى المرحاض ، وألويها بفكرة واحدة: "حسنًا ، متى ستنتهي جميعًا؟!" (ماذا يمكنك أن تفعل - أنا معتاد على إنهاء الأمور).

ذات صباح نهضت وقررت بحزم: "كفى من هذا!".

أقدم لكم السيناريو الصغير الذي كتبته مؤخرًا لـ "شبكة التواصل الاجتماعي" (مع لعبة ورق وعاهرات).

لمشاهدة عرض توضيحي ، قم بتنزيل الأرشيف ، وقم بتشغيل ملف "test / test.html".

ما هي الابتكارات التي يقدمها هذا البرنامج النصي:

نظرًا لأنهم قاموا بتحويل "شريط التمرير" الرئيسي إلى شيء غير مفهوم ، نحتاج إلى إرجاع "شريط التمرير" العادي ، وهو ما فعلناه من خلال رسم شريط رمادي على الجانب الأيمن من الصفحة ، على يسار "شريط التمرير" العادي مباشرةً.

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

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

وحول التنقل إلى أي صفحة تحتاجها: يمكنك الوصول إلى أي صفحة هنا أيضًا - فقط استبدل رقم صفحة التحديد التي تحتاجها في عنوان صفحة الويب. نظرًا لأن عناوين url التي يمكن للبشر قراءتها هي المعيار الآن ، يجب أن يكون هذا حلاً جيدًا.

من الواضح أن هذا النص ليس شيئًا منحوتًا في الجرانيت ، وأنا نفسي ، استيقظت هذا الصباح ، أعدت كتابة نصفه. ومع ذلك ، يبدو أن الأداء مستقر ، وتم اختباره في أحدث إصدارات Chrome و FireFox. سأقول على الفور: أنا لا أطارد "التوافق عبر المتصفحات" - يمكن دائمًا الانتهاء إذا أراد شخص ما استخدام هذا النص البرمجي على موقعه "عبر المتصفح".

يبدو وكأنه كل شيء ، الديمو يتحدث عن نفسه. المنشور يثير التعليقات.

ما الذي يمكن فعله أيضًا (بناءً على التعليقات):

عند النقر فوق أي مكان على الشريط - انتقل إلى صفحة التحديد المقابلة.

قم بإزالة صفحات البيانات من أعلى صفحة الويب عندما يكون هناك الكثير من البيانات على صفحة الويب (حتى لا تبطئ).

أمثلة على "التمرير اللانهائي" المحسن.

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

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

الفائدة رقم 1: مشاركة المستخدم ونشر المحتوى

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

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

بحر من الدبابيس على موقع Pinterest

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

موجز أخبار Facebook: يقوم المستخدم بالتمرير مرارًا وتكرارًا لتحديث المحتوى

الفائدة رقم 2: التمرير أفضل من النقر

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

إذا كنت تستخدم النقرات ، فإن كل جزء من تحديث المحتوى يتطلب نقرة إضافية ، بالإضافة إلى وقت لتحميل الصفحة. للتمرير: يتم تحديث المحتوى باستمرار ، يلزم إجراء واحد فقط. المصدر: designbolts

الفائدة رقم 3: التمرير مفيد للأجهزة المحمولة

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

الضعف رقم 1: أداء الصفحة وموارد الجهاز

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

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

العيب رقم 2: بيانات البحث والموقع

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

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

واجهة بحث التمرير اللانهائية Etsy. الإصدار الحالي مبني على ترقيم الصفحات.

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

العيب رقم 3: شريط التمرير غير ذي صلة

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

يجب أن يعكس شريط التمرير الطول الفعلي للصفحة.

العيب رقم 4: لا يوجد بدروم

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

عندما تم تنفيذ التمرير اللانهائي على LinkedIn في عام 2012 ، يمكن للمستخدمين التمرير على الشاشة قبل تحميل المحتوى.

يجب أن تتمكن المواقع ذات التمرير اللانهائي من الوصول إلى التذييل ، أو جعله ثابتًا ، أو نقل الروابط إلى الرأس أو الشريط الجانبي.

نقل Facebook جميع الروابط من التذييل (على سبيل المثال ، "القانونية" ، "الوظائف") إلى اللوحة الموجودة على اليمين.

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

يوفر Instagram زر "تحميل المزيد" بحيث يكون التذييل متاحًا دائمًا للمستخدمين.

يقسم ترقيم الصفحات المحتوى إلى صفحات منفصلة. إذا قمت بالتمرير لأسفل الصفحة ورأيت سلسلة من الأرقام - فهذه السلسلة من الأرقام هي ترقيم الصفحات للموقع أو التطبيق.

الفائدة رقم 1: التحويل الجيد

يعمل ترقيم الصفحات بشكل جيد عندما يبحث المستخدم عن شيء ما في قائمة النتائج بدلاً من مجرد استعراض دفق البيانات.

يمكنك تقدير فوائد ترقيم الصفحات باستخدام بحث Google كمثال. يستغرق العثور على أفضل نتائج البحث ثانية أو ساعة ، حسب موضوع البحث. ولكن عندما تقرر التوقف عن البحث في Google بالتنسيق الحالي ، فأنت تعرف العدد الدقيق لنتائج البحث. يمكنك تحديد وقت التوقف وعدد النتائج المراد دراستها.

بيانات نتائج بحث Google

الفائدة رقم 2: الشعور بالسيطرة

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

أيضًا ، عندما يرى المستخدمون العدد الإجمالي للنتائج (عندما لا يكون لانهائيًا بالطبع) ، يسهل عليهم تقدير المدة التي سيستغرقها للعثور على المحتوى الذي يبحثون عنه.

المنفعة رقم 3: موضع العنصر

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

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

ترقيم الصفحات مفيد للمواقع والتطبيقات التجارية. عندما يتسوق المستخدمون عبر الإنترنت ، فإنهم يحتاجون إلى القدرة على العودة إلى حيث توقفوا ومتابعة التسوق.

يستخدم موقع MR Porter ترقيم الصفحات للمنتجات

السلبيات: خطوات إضافية

للانتقال إلى صفحة جديدة باستخدام ترقيم الصفحات ، يجب على المستخدم العثور على الارتباط الهدف (على سبيل المثال ، "التالي") ، وتحريك مؤشر الماوس فوقه ، والنقر عليه ، وانتظر حتى يتم تحميل الصفحة الجديدة.

انقر للحصول على المحتوى

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

متى تستخدم التمرير اللانهائي / ترقيم الصفحات؟

لا يوجد سوى عدد قليل من الحالات التي يكون فيها التمرير اللانهائي فعالاً. هو الأنسب لمواقع الويب والتطبيقات ذات المحتوى الذي ينشئه المستخدم (Twitter ، Facebook) أو المحتوى المرئي (Pinterest ، Instagram). من ناحية أخرى ، يعد ترقيم الصفحات قويًا ومناسبًا تمامًا للمواقع والتطبيقات التي تلبي إجراءات المستخدم المستهدفة.

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

استنتاج

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

أثناء كتابة هذا المقال ، أدركت أن هناك نوعين من الأشخاص الذين يتجادلون دائمًا: أولئك الذين يفضلون ترقيم الصفحات وأولئك الذين يدعمون استخدام التمرير اللانهائي - تقدم هاتان "العشائر" دليلًا مقنعًا لصالح وجهة نظرهم.

في رأيي ، كل من ترقيم الصفحات والتمرير اللانهائي لهما فوائدهما. يعتمد اختيار أي من هذه الطرق على معايير كل مطور معين.

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

ما هي طريقة التمرير اللانهائي؟

في تطوير الويب ، يعد التمرير اللانهائي أسلوبًا يساعد في تحميل المحتوى تلقائيًا عندما يصل المستخدم إلى نهاية المحتوى المعروض ويقوم بتمرير الصفحة.

يمكن العثور على أفضل استخدام لهذه التقنية على Twitter و Facebook والعديد من الموارد الأخرى.

فيما يلي قائمة أفضل 10 ملحقات jQueryالتمرير اللانهائي (التمرير).

أفضل 10 ملحقات لـ jQuery infinite Scroll:

إذا قررت استخدام المكون الإضافي jQuery infinite Scroll ، فسنقوم بتسهيل الأمر عليك. تحتوي مكونات jQuery العشرة اللانهائية التمرير أدناه على جميع الميزات التي تحتاجها - ما عليك سوى اختيار الميزة التي تناسب موقعك بشكل أفضل للحصول على تجربة أكثر كفاءة وسهولة في الاستخدام.

jQuery الماسونية

يرتب البناء العناصر في المساحة الرأسية المتاحة. مكون إضافي شائع جدًا مع ما يقرب من 13000 نجمة على جيثب.

تنزيل تجريبي

iScroll

تريد إنشاء التمرير السلس اللانهائي؟ سيساعدك iScroll بالتأكيد في إنشاء تمرير مسج سلس. بفضل نظام التخزين المؤقت الذكي ، يمكنك إنشاء تمرير لا نهائي لتجربة مستخدم قوية. بالإضافة إلى jQuery ، فإنه يدعم أيضًا جافا سكريبت.

تنزيل تجريبي

نقاط الطريق

تجعل WayPoints من السهل تنفيذ وظيفة تمرير الصفحة. باستخدام هذا المكون الإضافي البسيط ، يمكنك تحويل التنقل مثل " السابق التالي'في واجهة AJAX قابلة للتمرير بلا حدود. الوثائق التفصيلية متاحة لـ WayPoints ، لذا يجب ألا يكون وضعها موضع التنفيذ مهمة صعبة.

تنزيل تجريبي

لانهائي Scroll.js

ملحق jQuery لانهائي للتمرير مدمج للغاية. يضيف Infinite Scroll الصفحة التالية تلقائيًا حتى لا تضطر إلى تحميل جميع الصفحات مرة واحدة.

تنزيل تجريبي

jscroll

jScroll هو ملحق jQuery لانهائي للتمرير سهل الاستخدام يسمح بالتخصيص المرن.

تنزيل تجريبي

jQuery-Endless-Scroll

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

تنزيل تجريبي

لفافة AJAX اللانهائية

إن Infinite AJAX Scroll عبارة عن مكون إضافي ذكي لتمرير jQuery اللانهائي. يمكنه تحويل نظام ترقيم الصفحات الحالي إلى نظام تمرير لا نهائي. يقرأ هذا المكون الإضافي على روابط الخادم " السابق التالي"صفحة موجودة ، وعندما يصل المستخدم إلى نهاية الصفحة ، يقوم بتحميل تلك الصفحات باستخدام AJAX.

تم تحسين هذا النهج أيضًا لتحسين محركات البحث وهو سهل التنفيذ للغاية.

تنزيل تجريبي

jQuery-ESN- التصفح التلقائي

البرنامج المساعد jQuery infinite التمرير المستخدم على نطاق واسع والذي يمكنك استخدامه بسهولة. يقوم تلقائيًا بإضافة محتوى الصفحة باستخدام AJAX عندما يعرض المستخدم الصفحة من ذاكرة التخزين المؤقت المضمنة في المتصفح. البرنامج المساعد سهل التعلم والاستخدام في الممارسة.

تنزيل تجريبي

التمرير اللانهائي jQuery

ملحق تمرير jQuery لانهائي بسيط آخر يسمح لك بتمرير النصوص أو الصور.

تنزيل تجريبي

endless.js

Endless.js هو ملحق jQuery يساعدك في إنشاء مخطوطات لا نهائية لعناصر HTML. يربط الجزء السفلي بالأعلى أو القسم الأيسر باليمين ، وبالتالي يخلق الوهم بالتمرير اللانهائي.

هل سبق لك أن درست كيف يستهلك الناس محتوى الويب؟ يشاهدون مئات الصفحات في اليوم. اقرأ أثناء التنقل ، وتوقف عند الصور والنصوص العريضة. علاوة على ذلك ، يقومون بمسح الصفحة ضوئيًا أكثر مما يقرؤون.

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

في هذه المقالة ، سوف نتعمق في طريقة منفصلة لاستهلاك المحتوى ، والتمرير اللانهائي ، وإلقاء نظرة على بعض الأمثلة المثيرة للاهتمام.

ما هو التمرير اللانهائي؟

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

أين تستخدم التمرير اللانهائي؟

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

للشبكات الاجتماعية

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

لمحتوى لا يقل أهمية

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

لواجهات المحمول

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

لرواية القصص

وهكذا ، كما التدرج اللانهائيأمرًا أساسيًا في الحفاظ على اهتمام المستخدم وتفاعله. ومع ذلك ، يجب استخدامه بحكمة ، فقط عندما تكون هناك حاجة فعلية إليه.