jQuery 3.3

.ready()




jquery

.ready (معالج) العودة: jQuery

الوصف: حدد دالة يتم تنفيذها عند تحميل DOM بالكامل.

  • الإصدار المضاف: 1.0 ready (معالج)

    • معالج
      النوع: Function ()
      هي وظيفة يتم تنفيذها بعد أن يكون DOM جاهزًا.

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

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

توفر المتصفحات أيضًا حدث load على كائن window . عند إطلاق هذا الحدث ، يشير إلى أن جميع مواد العرض في الصفحة قد تم تحميلها ، بما في ذلك الصور. يمكن مشاهدة هذا الحدث في jQuery باستخدام $( window ).on( "load", handler ) . في الحالات التي تعتمد فيها الشفرة على الأصول المحملة (على سبيل المثال ، إذا كانت أبعاد الصورة مطلوبة) ، فيجب وضع الشفرة في معالج لحدث load بدلاً من ذلك.

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

تقدم jQuery عدة طرق لإرفاق دالة سيتم تشغيلها عندما يكون DOM جاهزًا. جميع معادلات النحو التالية مكافئة:

  • $( handler )
  • $( document ).ready( handler )
  • $( "document" ).ready( handler )
  • $( "img" ).ready( handler )
  • $().ready( handler )

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

يوجد أيضًا $(document).on( "ready", handler ) ، تم إيقافه اعتبارًا من jQuery 1.8 وإزالته في jQuery 3.0 . لاحظ أنه إذا أصبح DOM جاهزًا قبل إرفاق هذا الحدث ، فلن يتم تنفيذ المعالج.

يتم .ready() الأسلوب. .ready() عادةً مع وظيفة مجهولة:

$( document ).ready(function() {
  // Handler for .ready() called.
});

وهو ما يعادل الطريقة الموصى بها للاتصال:

$(function() {
  // Handler for .ready() called.
});

التعرج على كائن jQuery

عند استخدام $.noConflict() لتجنب تعارض مساحة الاسم ، لم يعد الاختصار $ متوفرًا. ومع ذلك ، يتم تمرير المعالج. .ready() مرجع إلى كائن jQuery يسمى الأسلوب. هذا يسمح للمعالج باستخدام كائن jQuery ، على سبيل المثال $ ، دون معرفة اسمه المستعار:

jq2 = jQuery.noConflict();
jq2(function( $ ) {
  // Code using $ as usual goes here; the actual jQuery object is jq2
});

مثال:

عرض رسالة عند تحميل DOM.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>ready demo</title>
  <style>
  p {
    color: red;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
  <script>
 
  $(function() {
    $( "p" ).text( "The DOM is now loaded and can be manipulated." );
  });
 
  </script>
 
</head>
<body>
 
<p>Not loaded yet.</p>
 
 
</body>
</html>

عرض: