كيفية منع GWT Onload Flicker في مشروع Starter تطبيق الويب؟

https://stackoverflow.com/questions/2034673

19-09-2019
|

سؤال

أنا جديد في GWT، وأنا متأكد من أن هذا يتم الرد عليه في مكان ما لكنني لم أجد بعد

قمت بتنزيل البرنامج المساعد GWT 2.0 Eclipse، وكان مسرورا لرؤيته يأتي مع مشروع بداية.

ومع ذلك، فوجئت أنه عند تشغيله، هناك خفقان غير مباشر ...

الأحمال النص دون CSS أولا
يستغرق الأمر بعض الوقت حتى النهاية

(إذا كنت لا ترى وميض، حاول واضغط F5. لأجل الانتعاش)

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

يبدو هذا التطبيق الأحمال في هذا الترتيب: (تصحيح لي من فضلك إذا قمت بمزجته، تخميني الوحيد)

التصميم الأساسي HTML،
كل جافا سكريبت، و CSS
يدير المنطق في حدث "Onload" (في أقرب وقت يمكن أن تبدأ جافا سكريبت المترجمة -؟)

لذلك لا يمكنني إضافة سبينر تحميل برمجيا قبل تحميل GWT، قليلا من التقاط 22 بالنسبة لي

هل أنا أفتقد شيئا أساسيا؟ هل هناك طريقة أفضل الممارسات لإضافة هذا الدوار الأولي؟

كنت أفكر ببساطة إضافة DIV مع GIF المتحركة، وفي حدث تحميل - إخفاءها.

لكنني متأكد من وجود شيء أفضل.

اسمحوا لي أن أعرف إذا كان هذا هو سؤال مكررة

تحديث: وجدت هذا سؤال ذي صلة, ، عدم الرد على الألغام على الرغم من ...

المحلول

لقد تعاملت مع هذه المشكلة من قبل من قبل عدم استخدام وحدة GWT لتحميل CSS، ولكن قم بتحميلها مباشرة في علامة نفسها. إذا قمت بذلك، فسيتم تحميل المتصفح دائما CSS أولا، حتى قبل تحميل GWT JS.

هذا يعني أنك ستفقد القليل من المرونة والسرعة، لكن الحل الوحيد الذي استخدمته حتى الآن.

تحرير: معلومات اضافية سبب أريد مكافأة: د

إذا كنت لا تزيل<inherits name='com.google.gwt.user.theme.standard.Standard'/> من ملف Module.gwt.xml الخاص بك، ثم يتم تحميل السمة القياسية GWT في ملف JS الذي ينشئ GWT. يتم تحميل ملف JS هذا بعد أن تقدم صفحة HTML، وحقن CSS بعد التحميل. وبالتالي وميض.

لتجنب وميض، يمكنك التعليق على هذا الخط وإدخال ورقة أنماط الخاصة بك في <head> من ملف HTML الخاص بك. هذا يضمن تحميل CSS الخاص بك قبل تقديم HTML، وتجنب أي وميض. إذا كنت تريد حقا موضوع GWT، فستحصل عليه مصدر الرمز.

لاستخدام سبينر مع GWT سهل للغاية. طريقة واحدة بسيطة هي الاحتفاظ بها في DIV مع معرف في ملف HTML نفسه. ثم، في onModuleLoad(), ، ببساطة إخفاء هذا div عن طريق الاتصال RootPanel.get("spinner").setVisible(false);

يجب أن تظهر سبينر حتى يحمل GWT نفسه.

نصائح أخرى

إليك ما نفعله لتنفيذ الدوار.

يمكنك وضع شيء مثل HTML التالي أسفل سطر البرنامج النصي الذي يقوم بتحميل التطبيق الخاص بك (أي واحد مع nocache.js). على سبيل المثال:

    <div id="loading">
        <div id="loading-msg">
            <img src="icons/loading-page.gif" lt="loading">
            <span>Loading the application, please wait...</span>
        </div>    
    </div>

ثم في نقطة الدخول إلى التطبيق، يمكنك الوصول إلى الصفحة باستخدام DOM وإزالة هذا DIV. على سبيل المثال

final RootPanel loading = RootPanel.get("loading");
if (loading != null) {
    DOM.removeChild(RootPanel.getBodyElement(),
                    loading.getElement());
}

Ehrann: أخشى أن تكون هذه الممارسة المذكورة في الإجابات أعلاه هي الطريقة الوحيدة للآن. لا تقدم GWT ميزات مماثلة لإظهار / إخفاء إطار "تحميل" "على الطاير". أعتقد أن أحد السبب هو أن هذا الشرط ليس "شائعا" لجميع مستخدمي GWT، قد يرغب شخص واحد بأسلوب مختلف جدا من "التحميل" من غيرها. لذلك عليك أن تفعل ذلك بنفسك.

يمكنك إلقاء نظرة على صفحة معرض GXT (بناء على GWT أيضا): http://www.extjs.com/Explorer/ كيف يفعلون ذلك. لمصدرها، قم بتنزيل Ext GWT 2.1.0 SDK هنا: http://www.extjs.com/products/gxt/download.php. والتحقق من مجلد العينات / المستكشف بعد استخراجها. للحصول على التفاصيل انظر التحرير أدناه:

تعديل

تحقق من شفرة المصدر ل http://www.extjs.com/examples/explorer.html. ويمكنك رؤية DIV مع معرف "التحميل". بالنسبة لكل عينات (تمدد Viewport)، يتم استدعاء GXT.HideloadingPanel (LoadingPanelID) في Onattach () (التهيئة)، والتي تخفي إطار التحميل.

تحقق من شفرة المصدر لعوبر هنا

تحقق من شفرة المصدر لجهاز gxt.hideloadingpanel هنا

يمكنك أن تفعل ذلك بطريقة مماثلة.

يمكنك وضع رسالة تحميل HTML في الصفحة المضيفة (استخدام سمات الأنماط أو تضمين علامة النمط في الرأس للتأكد من أنها مصممة)، وإزالة الرسالة بمجرد تحميل وحداتك، مثل المستند. Godody (). ) مع .setinnerhtml ("") أو .removechild ()، ثم تقديم طلبك برمجيا ولكنك تريد.

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

لا تنتمي إلى StackOverflow