طريقة تقليل بطئ اظهار الصفحة بسبب select مع 4000 option

Zerious San · 26 أبريل

السلام عليكم
انا عندي صفحة فيها select مع 4000 option و المشكلة ان اذا بدخل الصفحة تحميل الصفحة يأخذ وقت من 3 الى 7 ثواني مب شيء كبير لكن المشروع حقي بيصير فيه نفس المشكلة مستقبلا كيف احل هذي المشكلة قبل ان تواجهني مرة ثانية بحثت لكن ما لقيت حل.

محمد_عاطف · 26 أبريل

نعم توجد عدة طرق لحل تلك المشكلة و يجب حلها حتى تساعد فى جعل موقعك اسرع و يكون متوافق مع محركات البحث SEO .

يمكنك حل تلك المشكلة عن طريق عدم تحميل ال options فى بداية الصفحة ولكن عند الضغط على select نقوم بارسال طلب AJAX للسيرفر نقوم منه بجلب بيانات ال options عن طريق الجافا سكريب وبعد تحميل الطلب نقوم بانشاء تلك ال options وهذا كود مثال للحل .

<!DOCTYPE html>
<html>

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>

<body>

    <select id="select_id">
        <option selected>Select</option>
    </select>

    <script>
        $(document).ready(function () {
            $("#select_id").one('click', function () {
                $.ajax({
                    url: "https://jsonplaceholder.typicode.com/users",
                    type: 'GET',
                    success: function (response) {
                        var select = $('#select_id');
                        $.each(response, function (key, data) {
                            select.append('<option value=' + data.id + '>' + data.email + '</option>'); 
                        });
                    }
                });
            })
        });

    </script>

</body>

</html>

هنا قمنا باستخدام مكتبة jquery لارسال الطلبات و انشاء ال options بعد رجوع الطلب .

اولا يجب عليك انشاء عنوان لارجاع البيانات الخاصة بال select على السيرفر .

واستخدام الكود السابق فى الواجهة الامامية مع استبدال العنوان الذى يتم ارسال الطلب له بالعنوان لديك وايضا طريقة انشاء ال option قم فقط باستبدال البيانات التى تريد وضعها والان عند الضغط على عنصر select سيتم ارسال الطلب وانشاء ال options تلقائيا.

او يمكنك استخدام مكتبة select2 وهى جيدة لمثل هذه الحالات وتوجد بها خصائص جيدة مثل البحث و ايضا اظهار علامة التحميل بينما يتم ارسال الطلب للسيرفر.

Zerious San · 26 أبريل

شكرا. لكن كيف اسويها مع ملف json و يكون من github

بتاريخ 44 دقائق مضت قال محمد_عاطف:
نعم توجد عدة طرق لحل تلك المشكلة و يجب حلها حتى تساعد فى جعل موقعك اسرع و يكون متوافق مع محركات البحث SEO .

يمكنك حل تلك المشكلة عن طريق عدم تحميل ال options فى بداية الصفحة ولكن عند الضغط على select نقوم بارسال طلب AJAX للسيرفر نقوم منه بجلب بيانات ال options عن طريق الجافا سكريب وبعد تحميل الطلب نقوم بانشاء تلك ال options وهذا كود مثال للحل .
<!DOCTYPE html>
<html>

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>

<body>

    <select id="select_id">
        <option selected>Select</option>
    </select>

    <script>
        $(document).ready(function () {
            $("#select_id").one('click', function () {
                $.ajax({
                    url: "https://jsonplaceholder.typicode.com/users",
                    type: 'GET',
                    success: function (response) {
                        var select = $('#select_id');
                        $.each(response, function (key, data) {
                            select.append('<option value=' + data.id + '>' + data.email + '</option>'); 
                        });
                    }
                });
            })
        });

    </script>

</body>

</html>
هنا قمنا باستخدام مكتبة jquery لارسال الطلبات و انشاء ال options بعد رجوع الطلب .

اولا يجب عليك انشاء عنوان لارجاع البيانات الخاصة بال select على السيرفر .

واستخدام الكود السابق فى الواجهة الامامية مع استبدال العنوان الذى يتم ارسال الطلب له بالعنوان لديك وايضا طريقة انشاء ال option قم فقط باستبدال البيانات التى تريد وضعها والان عند الضغط على عنصر select سيتم ارسال الطلب وانشاء ال options تلقائيا.

او يمكنك استخدام مكتبة select2 وهى جيدة لمثل هذه الحالات وتوجد بها خصائص جيدة مثل البحث و ايضا اظهار علامة التحميل بينما يتم ارسال الطلب للسيرفر.

شكرا. لكن كيف اسويها مع ملف json و يكون من github

محمد_عاطف · 26 أبريل

بتاريخ 2 ساعة قال Zerious San:

شكرا. لكن كيف اسويها مع ملف json و يكون من github

شكرا. لكن كيف اسويها مع ملف json و يكون من github

يمكنك كتابة عنوان الملف على السيرفر او اذا كان مرفوع على github فقم بنسخ العنوان الخاص به وتاكد عند الذهاب لهذا العنوان انه يوقم بارجاع البيانات على هيئة json

طريقة تقليل بطئ اظهار الصفحة بسبب select مع 4000 option

السؤال

Zerious San

رابط هذا التعليق

شارك على الشبكات الإجتماعية

3 أجوبة على هذا السؤال

Recommended Posts

محمد_عاطف

رابط هذا التعليق

شارك على الشبكات الإجتماعية

Zerious San

رابط هذا التعليق

شارك على الشبكات الإجتماعية

محمد_عاطف

رابط هذا التعليق

شارك على الشبكات الإجتماعية

انضم إلى النقاش

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية