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

السؤال

نشر

بحاول أنفذ طريقة تأخير ملفات الـ 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
نشر

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

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

 

@Mohammad Al Eik

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

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

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

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

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   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.

  • إعلانات

  • تابعنا على



×
×
  • أضف...