كيف أعرض مربع حوار jquery قبل تحميل الصفحة بأكملها؟

https://stackoverflow.com/questions/687767

22-08-2019
|

سؤال

قد يستغرق إكمال عدد من العمليات على موقعي وقتًا طويلاً.

عندما أعرف أن تحميل الصفحة سيستغرق بعض الوقت، أرغب في عرض مؤشر التقدم أثناء تحميل الصفحة.

من الناحية المثالية، أود أن أقول شيئًا على غرار ما يلي:

$("#dialog").show("progress.php");

ويكون ذلك التراكب أعلى الصفحة التي يتم تحميلها (يختفي بعد اكتمال العملية).

لا يمثل ترميز شريط التقدم وعرض التقدم مشكلة، بل تكمن المشكلة في ظهور مؤشر التقدم أثناء تحميل الصفحة.لقد كنت أحاول استخدام مربعات حوار JQuery لهذا الغرض ولكنها تظهر فقط بعد تحميل الصفحة بالفعل.

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

إليك مثال بسيط لتوضيح المشكلة.يفشل الكود أدناه في عرض مربع الحوار قبل انتهاء فترة التوقف المؤقت لمدة 20 ثانية.لقد حاولت في Chrome و Firefox.في الواقع، لا أرى حتى النص "الرجاء الانتظار...".

إليك الرمز الذي أستخدمه:

<html>
  <head>
      <link type="text/css" href="http://jqueryui.com/latest/themes/base/ui.all.css" rel="stylesheet" />
    <script type="text/javascript" src="http://jqueryui.com/latest/jquery-1.3.2.js"></script>
    <script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.core.js"></script>
    <script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.dialog.js"></script>

  </head>
  <body>
    <div id="please-wait">My Dialog</div>
    <script type="text/javascript">
      $("#please-wait").dialog();
    </script>
    <?php
    flush();
    echo "Waiting...";
    sleep(20);
    ?>
  </body>
</html>

المحلول

ستحتاج إلى تشغيل هذا الجزء من التعليمات البرمجية مباشرة بعد علامة <body> الخاصة بك، مثل:

<html>
  <head>
  </head>
  <body>
    <div id="please-wait"></div>
    <script type="text/javascript">
      // Use your favourite dialog plugin here.
      $("#please-wait").dialog();
    </script>
    ....
  </body>
</html>

لاحظ أنني حذفت $(function (){}) التقليدية لأنك تحتاج إلى تحميلها بمجرد ظهور الصفحة، وليس بعد تحميل DOM بالكامل.

لقد قمت بذلك من قبل ويعمل بشكل رائع، حتى لو لم ينته تحميل الصفحة بعد.

يحرر: يجب أن تكون متأكدًا من أن المكوّن الإضافي لمربع حوار jQuery الذي تستخدمه يتم تحميله قبل يتم تحميل DOM بالكامل.عادةً ليس هذا هو الحال، فلن ينجح الأمر.في هذه الحالة، ستحتاج إلى استخدام حل جافا سكريبت العادي، مثل العرض المبسط 1 أو الصندوق المبسط 2.

مرخصة بموجب: CC-BY-SA مع الإسناد

لا تنتمي إلى StackOverflow