اذهب إلى المحتوى
  • 0

كيفية تنفيذ حدث مرة واحدة عند النزول لأسفل الصفحة بواسطة جافا سكريبت

Mohamed Refaat10

السؤال

بحاول أنفذ طريقة تأخير ملفات الـ css الغير هامة بحيث لا يتم تحميلها مباشرة حتى يقوم المستخدم بتحريك شريط التمرير لأسفل بمقدار 1px وبعدها يتم تنفيذ الحدث وإضافة ملف التنسيقات css لعلامة head وذلك لتوفير بعض الوقت لتحميل الموقع ويكون سريع في التصفح

الكود يعمل ولكن يتم إنشاء ملف التنسيقات في كل مرة يتم تحريك فيها شريط التمرير ، أريد أن يتم تنفيذ الحدث عند أول مرة يتم تحريك فيها شريط التمرير

 

function createLinkCss(va,app){
  var createLink = document.createElement("link");
  var createAttrHref = document.createAttribute("href");
  var createAttrRel = document.createAttribute("rel");
  createAttrHref.value = va;
  createAttrRel.value = "stylesheet";
  createLink.setAttributeNode(createAttrHref);
  createLink.setAttributeNode(createAttrRel);
  document.getElementsByTagName(app)[0].appendChild(createLink);
}

window.onscroll = function() {scrollLoad()};
function scrollLoad() {
  if (document.body.scrollTop > 1 || document.documentElement.scrollTop > 1) {
    createLinkCss('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css','head');
  } 
}

 

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

document.body.addEventListener("mousemove", function() {
createLinkCss('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css','head');
},{once : true});

 

 

 

رابط هذا التعليق
شارك على الشبكات الإجتماعية

Recommended Posts

  • 1

يمكنك اضافة متغير نحفظ فيه أن التابع قد تنفذ أم لا ك boolean 

var firstScroll = false;//نضع هذا المتغير كقيمة إفتراضية

window.onscroll = function() {
  if(firstScroll===false){//لن ينفذ التابع إلا إذا كانت قيمة المتغير false
      scrollLoad()
  }
};
function scrollLoad() {
  if (document.body.scrollTop > 1 || document.documentElement.scrollTop > 1) {
    firstScroll = true;//نغير قيمة المتغير إلى ترو لكي لاينفذ مرة اخرى
    createLinkCss('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css','head');
  } 

 

تم التعديل في بواسطة Mohammad Al Eik
رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 0
بتاريخ 24 دقائق مضت قال Mohammad Al Eik:

يمكنك اضافة متغير نحفظ فيه أن التابع قد تنفذ أم لا ك boolean 


var firstScroll = false;//نضع هذا المتغير كقيمة إفتراضية

window.onscroll = function() {
  if(firstScroll==="false"){//لن ينفذ التابع إلا إذا كانت قيمة المتغير false
      scrollLoad()
  }
};
function scrollLoad() {
  if (document.body.scrollTop > 1 || document.documentElement.scrollTop > 1) {
    firstScroll = true;//نغير قيمة المتغير إلى ترو لكي لاينفذ مرة اخرى
    createLinkCss('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css','head');
  } 

 

كده مش بينفذ الدالة

رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 0
بتاريخ 18 دقائق مضت قال Mohamed.Refaat:

كده مش بينفذ الدالة

بلى صديقي بإمكانك تتبع الكود

في اول مرة تكون قيمة المتغير false وهنا لن ينفذ ال==إلا إذا كانت قيمة المتغير false حسب الشرط

window.onscroll = function() {
  if(firstScroll===false){//لن ينفذ التابع إلا إذا كانت قيمة المتغير false
      scrollLoad()
  }
};

وعندما يدخل الى جسم التابع نحول القيمة الى true كي لا يتحقق الشرط السابق مرة اخرى

 

تم التعديل في بواسطة Mohammad Al Eik
رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 0
بتاريخ 5 دقائق مضت قال Mohammad Al Eik:

بلى صديقي بإمكانك تتبع الكود

في اول مرة تكون قيمة المتغير false وهنا لن ينفذ ال==إلا إذا كانت قيمة المتغير false حسب الشرط


window.onscroll = function() {
  if(firstScroll==="false"){//لن ينفذ التابع إلا إذا كانت قيمة المتغير false
      scrollLoad()
  }
};

وعندما يدخل الى جسم التابع نحول القيمة الى true كي لا يتحقق الشرط السابق مرة اخرى

 

لا يعمل ممكن تجرب الكود بنفسك

رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 0

لقد عدلت الكود كان هناك خطأ في نوع كلمة false 

"false" =====> false

عدل كلمة "false" واجعلها من دون " " 

عذراً لهذا الخطأ صديقي

تم التعديل في بواسطة Mohammad Al Eik
رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 0

عدلته واشتغل لكنك سبقتنى بالتعديل ، على العموم شكرأ لك لحل المشكلة

window.onscroll = function() {
	if(firstScroll == false){
		scrollLoad()
	}
}

 

@Mohammad Al Eik

إيه رأيك لو عملت تأخير لإعلانات جوجل أدسنس ضمن الدالة هل لها تأثير سلبي ؟

رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 0
بتاريخ 15 دقائق مضت قال Mohamed.Refaat:

إيه رأيك لو عملت تأخير لإعلانات جوجل أدسنس ضمن الدالة هل لها تأثير سلبي ؟

نعم بإمكانك القيام بذلك لا يوجد مشكلة

رابط هذا التعليق
شارك على الشبكات الإجتماعية

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

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أجب على هذا السؤال...

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.

  • إعلانات

  • تابعنا على



×
×
  • أضف...