كيفية التحكم في تحميل المحتوى الديناميكي في صفحتك HTML باستخدام JavaScript

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

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

htmlCopy code
<script>
var stopLoading = false;

function yHandler(){
    var wrap = document.getElementById('wrap');
    var contentHeight = wrap.offsetHeight;
    var yOffset = window.pageYOffset; 
    var y = yOffset + window.innerHeight;

    if(y >= contentHeight && !stopLoading){
        // Ajax call to get more dynamic data goes here
        wrap.innerHTML += '
';
        
        // Check if enough content is loaded, and stop loading if necessary
        var newDataElements = document.querySelectorAll('.newData');
        if (newDataElements.length >= 5) { // Adjust the number based on your needs
            stopLoading = true;
            var status = document.getElementById('status');
            status.innerHTML = "Content fully loaded";
        }
    }

    var status = document.getElementById('status');
    status.innerHTML = contentHeight+" | "+y;
}
window.onscroll = yHandler;
script>

في هذا المثال، قمت بإضافة متغير stopLoading وشرط إضافي للتحقق مما إذا كان يجب أن تتوقف عملية التحميل أم لا. تم تحديد قيمة 5 كعدد قواعد newData المحملة بما فيه الكفاية، ويمكنك تعديل هذا الرقم حسب احتياجاتك.

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

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

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

لحل هذه المشكلة، تمت إضافة متغير stopLoading وتم تعيينه إلى true بمجرد تحميل كمية كافية من البيانات (في هذا المثال، 5 عناصر newData). عندما يتم تعيين stopLoading إلى true، يتم عرض رسالة في العنصر الذي يحمل الهوية status تشير إلى أن المحتوى قد تم تحميله بالكامل، ويتوقف التحميل الأوتوماتيكي.

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