نحوه ساخت پیش بارگذار در حالی که بارگیری در حال انجام است. ساخت پیش بارگذار تمام عیار JS برای برنامه AJAX. تصاویر را بصورت حلقه ای کلون کنید

بسیاری از برنامه نویسان برای سریعتر بارگذاری صفحه JavaScript و CSS را بهینه می کنند.
اما همه آنها پیش بارگذاری نمی کنند ، که به طور ذهنی سریعتر بارگذاری می شود.

روش شماره 1 ارزان و شاد.
ایده ساده است - شما باید عکسی را در مرکز قرار دهید که به کاربر نشان دهد صفحه همچنان در حال بارگیری است. کد کاملاً ساده است ، ما درست بعد از آن می نویسیم :

1. < div id ="preloaderbg" class ="centerbg1" >
2. < div class ="centerbg2" >
3. < div id ="preloader" >
6. < script type ="text/javascript" >
7. سند .getElementById ("preloaderbg") .style.display \u003d "بلوک"؛

1. .centerbg1 (
2. نمایش: هیچ؛
3. عرض: 100٪
4. قد: 100٪
5. موقعیت: مطلق؛
6. بالا: 0px؛
7. سمت چپ: 0px؛
8. z-index: 1000؛
9. background: url ("/ design / im / texture1.jpg") # 3c363e؛
10. .centerbg2 (
11. موقعیت: مطلق؛
12. سمت چپ: 50٪؛
13. بالا: 50٪؛
14. # پیش بارگذار (
15. بالا: -50٪؛
16. سمت چپ: -50٪؛
17. موقعیت: نسبی؛
18. عرض: 333px؛
19. ارتفاع: 26 پیکسل
20. زمینه: url ()؛
21. حاشیه: جامد # edda3d 2px؛

* این کد منبع با کد منبع برجسته برجسته شد.

در نتیجه ، بلافاصله پس از بارگیری ، یک بلوک با یک نوار پیشرفت متحرک در مرکز صفحه داریم. پارامتر سرریز باید تغییر کند تا نوار پیمایش ظاهر نشود و کاربر نتواند به پایین پیمایش کند و به محتوای صفحه نگاه کند.

سپس ، وقتی همه چیز بارگیری شد ، باید پیش بارگذار را بردارید و سرریز را در موقعیت قابل مشاهده قرار دهید.

2. سند .body.style.overflow \u003d "قابل مشاهده"؛

* این کد منبع با کد منبع برجسته برجسته شد.

من این قسمت از کد را در یک فایل با توابع JS ، plreloader1.js قرار می دهم

اگر یک نوار پیشرفت از یک تصویر متحرک GIF ایجاد کنید ، ممکن است بسیار سنگین باشد ، حتی گاهی اوقات از صفحه خود که در آن قرار دارد ، بزرگتر باشد.
بنابراین ، بهتر است یک نوار (به عنوان مثال ، چنین) بکشید ، آن را به عنوان پس زمینه بلوک با پیش بارگذار ID قرار دهید و موقعیت پس زمینه را با توجه به تایمر حرکت دهید.

* این کد منبع با کد منبع برجسته برجسته شد.

و پس از بارگذاری ، این کار را انجام می دهیم:

1. clearInterval (pbPos)؛
2. سند .getElementById ("loaderbg") .style.display \u003d "هیچ"؛

* این کد منبع با کد منبع برجسته برجسته شد.

می توانید نتیجه کار را ببینید.

این روش معایبی دارد - اگر مخفی کردن پیش بارگذار را روی بارگذاری تنظیم کنید ، یعنی هنگام انتظار برای بارگیری همه تصاویر ، ممکن است کاربر فکر کند که صفحه فقط آویزان است - در واقع هیچ اتفاقی نمی افتد به جز انیمیشن. اگر از $ (سند). آماده () از jQuery آویزان شوید ، پس از ناپدید شدن پیش بارگذار ، تصاویر فقط بارگیری می شوند.

بنابراین پیشنهاد می شود از ...

روش شماره 2 واقعیت وجود دارد ، یا جدی پاسخ می دهد.
برای شروع ، بیایید 2 میله بارگیری رسم کنیم - فعال و نه خیلی زیاد.

بیایید یکی غیر فعال را به عنوان پس زمینه تنظیم کنیم ، و فعال را پس زمینه div کنیم ، که بسته به درصد بارگذاری ، عرض را تغییر خواهیم داد.

1. < div id ="loaderbg" class ="centerbg1" >
2. < div class ="centerbg2" >
3. < div id ="preloader" >
4. < img src ="/design/im/progbar_ph.gif" />
5. < div id ="progbarfg" >

* این کد منبع با کد منبع برجسته برجسته شد.

Progbar_ph.gif تصویری با 1 پیکسل ارتفاع و به اندازه عرض اسکرول ما است ( به عنوان مثال بدون آن در اینترنت اکسپلورر باگی است و من هنوز راهی دیگر برای ترازبندی تقسیم ها با نوار پیشرفت پیدا نکردم).
سبک ها همان روش قبلی است ، با این تفاوت که

#progbarfg (عرض: 0px ؛ پس زمینه: url ('/ design / im / progbar_fg.png'))

اکنون ساخت اسکریپت کوچکی باقی مانده است که محتوای سایت و تصاویر را به صورت پویا بارگیری کند. لازم است تا نوار پیشرفت حتی قبل از بارگیری چارچوب استفاده شده و سایر پرونده های JS نشان داده شده و تغییر کند.

بیایید از یک سایت متوسط \u200b\u200bساخته شده کاملاً در AJAX استفاده کنیم. بارگیری چیزی شبیه به این است:

• کد HTML بارگیری می شود
• تصاویر شروع به بارگیری می کنند
• سپس برخی از چارچوب ها
• پرونده های اضافی JS (اگرچه بهتر است همه چیز را بهم بچسبانید)
• یک عملکرد (یا چندین) راه اندازی می شود که محتوای اضافی را جذب می کند.

به همه اینها (منهای CSS و HTML) ، ما یک وزن را به بایت (یا وزن شرطی) اختصاص می دهیم ، مثلاً یک ، و با بارگیری هر پرونده (یا اجرای یک تابع) ، نوار پیشرفت خود را حرکت می دهیم.

من 2 روش را اجرا کردم - روش اول ساده است ، مانند این است:
بلافاصله قبل از ما نوشتیم:

< script type ="text/javascript" >
dLoader.start ("progbarfg" ، 333 ، "شمارش")؛

پارامتر اول شناسه بلوک با نوار بارگذاری فعال به عنوان پس زمینه است ، دوم عرض تصویر است ، پارامتر سوم روشی است که ما به وسیله آن وزن محتوا را محاسبه می کنیم.

اسکریپت تمام تصاویر موجود در صفحه را اسکن کرده و وزنی برابر با 1 به آنها اختصاص می دهد. تمام پرونده های JS در بدنه آن نوشته شده اند ، همانطور که در زیر به شما می گویم.
با این حال ، می خواهم وزن هر واحد محتوا نه یک واحد ، بلکه یک حجم واقعی در بایت باشد. و برای برنامه های AJAX ، من می خواهم بلافاصله همه گرافیک ها را بارگیری کنم.

برای این کار ، من یک اسکریپت PHP نوشتم که پوشه ای را با تصاویر طراحی اسکن می کند و کل این مورد را با اندازه فایل در یک آرایه قرار می دهد ، و به صورت اختیاری آن را فشرده می کند.

بنابراین پس از اضافه کردن قبل در مرحله بعدی ، یک نوار پیشرفت دریافت خواهیم کرد که پیشرفت بارگیری تمام محتوای صفحه را نشان می دهد و پس از آن محو می شود.

* این کد منبع با کد منبع برجسته برجسته شد.

وقتی همه پرونده های JS بارگیری شدند ، توابع موجود در آرایه فراخوانی راه اندازی می شوند. اگر با هم هستیم با استفاده از جی کوئری محتوا را بارگیری کنید ، سپس عملکرد به صورت زیر خواهد بود:

1. تابع fn (callBack) (
2. $ .get ("/" ، params ، تابع (data) (someHandler (data)؛ eval (callBack)؛))؛

* این کد منبع با کد منبع برجسته برجسته شد.

اسکریپت PHP موارد زیر را انجام می دهد: اسکریپت های لازم را با اندازه آنها و همچنین تصاویر و توابع اضافی را وارد آرایه می کند. کد:

1. $data ["js"] \u003d آرایه (
2. array ("path" \u003d\u003e "jquery-1.2.6.min.js"، "size" \u003d\u003e اندازه پرونده ($ jsRoot. "/ jquery-1.2.6.min.js"))،
3. آرایه ("path" \u003d\u003e "توابع.js" ، "size" \u003d\u003e اندازه پرونده ($ jsRoot. "/ توابع.js"))
4. $ data ["im"] \u003d GetFiles ($ imgRoot ، درست)؛
5. $ data ["invoke"] \u003d آرایه (
6. "action" \u003d\u003e "loadTemplates" ،
7. "size" \u003d\u003e GetDirSize (dirname (__ FILE __). "/ design / ajax templates /"، false)
8. $ data ["jspath"] \u003d "/ طراحی / js /"؛
9. $ data ["impath"] \u003d "/ design / im"؛

* این کد منبع با کد منبع برجسته برجسته شد.

بعد از بارگیری همه تصاویر و پرونده های JS ، رویداد onLoad فراخوانی می شود که شما در تابع () dLoader.start مشخص کردید

همچنین راهی برای شخصی سازی فرآیند راه اندازی وجود دارد.

درسی که در آن روند ایجاد یک صفحه پیش بارگیری برای یک صفحه را در نظر خواهیم گرفت. به عنوان پیش بارگذار ، از نماد Font Awesome یا یک گیف متحرک استفاده خواهیم کرد که هنگام بارگیری صفحه نمایش داده می شود.

نحوه ساخت پیش بارگذار برای وب سایت

صفحه هر وب سایتی هنگام باز کردن فوراً بارگیری نمی شود. برای بارگیری و نمایش صفحه مدتی طول می کشد که می تواند از 1 تا چند ثانیه باشد. برای اینکه به نوعی این فرآیند (به عنوان مثال روند بارگیری صفحه) برای کاربر روان شود ، می توان یک تصویر متحرک یا یک نماد را برای این بار به او نشان داد.

روند ایجاد یک پیش بارگذار بسیار ساده است و شامل این واقعیت است که ما باید بلافاصله پس از باز کردن صفحه سایت ، برخی از بلوک ها (# قبل از بارگیری) را که حاوی یک تصویر متحرک یا یک نماد است ، نشان دهیم. و بعد از بارگیری کامل صفحه ، این بلوک (# قبل از بارگیری) با یک gif یا نماد متحرک باید از دید کاربر مخفی شود.

ایجاد پیش بارگذار برای یک صفحه

ما یک پیش بارگذار را توسعه خواهیم داد که در 3 مرحله مانند یک پس زمینه سفید با یک نماد متحرک به نظر می رسد:

1. بیایید یک کد HTML متشکل از یک بلوک و یک نماد Font Awesome ایجاد کنیم. این قطعه کد باید به گونه ای در سند قرار گیرد که ابتدا برای کاربر نمایش داده شود ، یعنی درست بعد از برچسب بدن:

2. برای div و عنصر i (icon) سبک های CSS ایجاد کنید.

# قبل از بارگذاری (موقعیت: ثابت؛ / * موقعیت بلوک ثابت * / چپ: 0؛ / * موقعیت عنصر در سمت چپ * / بالا: 0؛ / * موقعیت عنصر در بالا * / راست: 0؛ / * موقعیت عنصر در سمت راست * / پایین : 0؛ / * موقعیت عنصر در پایین * / پس زمینه: #fff؛ / * رنگ پس زمینه بلوک * / z-index: 1001؛ / * آن را بالاتر از همه عناصر صفحه قرار دهید * /) # قبل از بارگذاری i (اندازه قلم) : 70px؛ / * اندازه آیکون * / موقعیت: مطلق ؛ / * موقعیت مطلق ، نسبت به نزدیکترین جد خود قرار گرفته است * / سمت چپ: 50٪ ؛ / * 50٪ عرض جعبه والد سمت چپ * / بالا: 50٪ ؛ / * 50 بالا ٪ ارتفاع بلوک والد * / حاشیه: -35px 0 0 -35px؛ / * جابجایی نماد به گونه ای که در مرکز قرار بگیرد * /) 3. اسکریپتی را اضافه کنید که پس از بارگیری صفحه ، پیش تنظیم کننده را پنهان کند (به عنوان مثال وقتی شی پنجره بارگیری می شود ):

اگر می خواهید از یک تصویر متحرک gif به عنوان نشانگر پیش بارگذار استفاده کنید ، لازم است در مراحل بالا تغییرات زیر را انجام دهید:

کلاسهای Font Awesome را در کد HTML حذف کنید:

در سبک های CSS ، تغییرات زیر را اعمال کنید (قانون # قبل از بارگذاری i (..) را تغییر دهید):

# من قبل از بارگذاری (عرض: 70px؛ / * عرض gif * / ارتفاع: 70px؛ / * ارتفاع GIF * / موقعیت: مطلق ؛ سمت چپ: 50٪ ؛ بالا: 50٪ ؛ پس زمینه: url ("دارایی ها) /images/img.gif ") تکرار نشدن 50٪ 50٪؛ / * مکان (url) تصویر gif و سایر پارامترها * / margin: -35px 0 0 -35px؛)

می توانید تصاویر متحرک gif را برای سایت خود از منبع http://preloaders.net/ بارگیری کنید یا از این بایگانی استفاده کنید.

هیچ کس دوست ندارد برای بارگیری صفحه سایت ، اسلایدر یا سایر اطلاعات طولانی منتظر بماند. اما اگر نمی توانید زمان انتظار برای سایت را کاهش دهید (به عنوان مثال ، این سایت تعاملی است و برای اجرای صحیح همه اسکریپت ها باید بارگیری شوند) ، باید سعی کنید زمان انتظار برای بارگیری را به نوعی روشن کنید.

برای این کار از پیش بارگذارهای متحرک استفاده کنید.

ما 20 پیش بارگذار جالب برای شما انتخاب کرده ایم که با CSS3 و HTML5 یا jQuery ساخته شده اند. آنها می توانند تجربه کاربر را به طرز چشمگیری بهبود بخشند.

می توانید از نشانگرهای بارگذاری متحرک برای گالری ها ، اسلایدرها ، وبلاگ ها و موارد دیگر استفاده کنید.

در اینجا چند بارگذار ساده و ظریف CSS آورده شده است. آنها به راحتی می توانند بخشی از هر پروژه وب شوند - فقط کد را کپی و پیست کنید.

و این یک پیش بارگذار رنگین کمانی آبدار است که با CSS ساخته شده است. مناسب برای پروژه های روشن ، پویا ، جوانان!

و این نشانگر بارگیری برای وب سایت هایی با طراحی کارت به خوبی کار می کند.

این پیش بارگذار زیبا با ترکیب HTML و CSS به یک اثر جادویی دست پیدا می کند. عالی به نظر می رسد و می تواند در هر نوع وب سایتی فوق العاده کار کند.

انیمیشن پویا - بلوک های رنگی که یک توپ کوچک را به حرکت در می آورند.

این یک بارگیری کننده عالی است که می تواند با یک آرم ، نام سایت یا شعار جذاب ترکیب شود. برای وب سایت شما یک عنصر نام تجاری قوی خواهد بود.

این لودر بسیار جذاب CSS برای انواع پروژه ها و برنامه ها مناسب است. ساده و زیبا ، و می توانید آن را با دو کلیک به وب سایت خود اضافه کنید.

فقط دو رنگ و شکل ساده. اما چه انیمیشن جالبی! این پیش بارگذار هر یک از وب سایت های شما را زیبا می کند.

این پیش بارگذار برای پروژه های پویا با طراحی های شیک و مینیمالیستی ایده آل است.

دوباره کلاسیک ، دوباره مکعب. اما انیمیشن بسیار جالب این شاخص بارگذاری را چشم نواز می کند.

و این تصویر از گروه "من نمی توانم چشم خود را بردارم" است. این به سادگی مسحور کننده و تضمین شده است که باعث می شود زمان انتظار برای بارگیری کاربران بارگیری شود.

اگر به دنبال شاخص های بارگذاری به سبک Tumblr هستید ، این موارد را بررسی کنید! انیمیشن روشن است مبتنی بر CSSبا استفاده از نمادهای SVG.

اینها پیش بارگذارهای CSS3 تعاملی دایره ای هستند. موشواره را روی قسمتهای مختلف ببرید و جلوه جالبی را ببینید.

انیمیشن ساده و ظریف در رنگ های پاستلی. ایده آل برای وب سایت های زنان.

و در این کیت می توانید انیمیشن بارگذاری را مطابق سلیقه خود انتخاب کنید. آیا این ساعت خواهد بود یا فقط دایره های سفید است؟

لودر ساده با اشکال مستطیلی که می چرخند. پیاده سازی آسان در هر سایتی.

و در اینجا مجموعه ای کامل از بارگیری کنندگان متحرک وجود دارد. موارد زیادی برای انتخاب وجود دارد و همه به راحتی در هر سایتی ادغام می شوند.

پیش بارگذار جالب با حلقه ها. سپس آنها را به یک مثلث ، و سپس به یک خط نقطه ای مرتب می شوند.

مجموعه دیگری از شاخص ها ، با انیمیشن های مختلف. همه پیش بارها به صورت دایره ای هستند.

این انیمیشن را می توان روی یک آرم متنی یا هر متنی قرار داد - به عنوان مثال ، یک نام شرکت یا شعار آن.

امیدواریم موردی از این مجموعه برای پروژه بعدی خود مفید باشد!

بسته به نوع منبع وب و میزان اطلاعات موجود در آن ، بارگیری سایت از چند میلی ثانیه تا چند ثانیه طول می کشد. در طول فرآیند بارگیری ، بسیاری از اتفاقات می تواند برای سایت رخ دهد: طرح می تواند به جهات مختلف پرش کند ، متن می تواند سبک را تغییر دهد. تمایل کاملاً طبیعی وجود دارد که همه این عیاشی ها را از چشم بازدیدکنندگان پنهان کند. این همان چیزی است که پیش بارها برای آن مناسب هستند.

Preloader یک شاخص بارگیری وب سایت است. می توان آن را به عنوان یک تصویر متحرک GIF یا به عنوان یک نوار بارگیری ساخت. اما صرف نظر از ظاهر preloader ، اصل عملکرد آن همان خواهد بود: نشانگر بارگذاری را در اسرع وقت به کاربر نشان دهید و پس از پایان بارگیری ، این نشانگر را مخفی کنید.

نحوه بارگیری صفحه وب

قبل از ایجاد نشانگر هر فرآیند ، باید خود فرآیند را درک کنید. بارگذاری صفحات وب نیز از این قاعده مستثنی نیست. بنابراین چگونه یک صفحه وب بارگیری می شود؟

1. مرورگر درخواستی را به سرور ارسال می کند.
2. سرور شروع به ارسال کد html صفحه به مرورگر می کند. ویژگی انتقال داده در اینترنت به گونه ای است که مرورگر کد صفحه را بلافاصله ، بلکه به صورت جزئی دریافت نمی کند.
3. به منظور صرفه جویی در وقت ، مرورگر شروع به پردازش کد html صفحه می کند بدون اینکه منتظر پایان سند باشد.
4. به محض مواجه شدن مرورگر با یک منبع خارجی در کد صفحه ، درخواستی را برای به دست آوردن این منبع به سرور ارسال می کند. علاوه بر این ، در بیشتر موارد ، اگر این منبع یک پرونده جاوا اسکریپت باشد ، پردازش بیشتر صفحه متوقف می شود تا اینکه کد جاوا اسکریپت این پرونده به طور کامل بارگیری و اجرا شود.
5. هنگامی که مرورگر کد html صفحه را به طور کامل دریافت و پردازش کرد (کنترل کننده به بسته شدن برچسب html رسیده است) ، مرورگر رویداد DOMContentLoaded را افزایش می دهد ، همچنین به عنوان DOM Ready شناخته می شود.
6. پس از بارگیری آخرین منبع خارجی ، مرورگر رویداد window.onload را بالا می برد. صفحه کاملاً بارگیری شده است.

روند آفرینش

اکنون ، با درک ترتیب بارگیری صفحه وب ، می توانید لیستی از کارها و شرایط را برای پیش بارگذار ما ایجاد کنید. شرایط من برای او به شرح زیر است:

• باید در اسرع وقت نمایش داده شود ، و تمام مطالب را پوشش دهد.
• در صورت امکان ، نمایشگر باید مستقل از منابع خارجی باشد.
• به محض بارگیری کامل صفحه باید پنهان شود. برای مخفی کردن از هر کتابخانه جاوا اسکریپت موجود می توان استفاده کرد.

اگر صفحه شما عملاً از گرافیک مستقل نیست ، به جای windows.onload می توانید از DOM Ready برای پنهان کردن پیش بارگذار استفاده کنید.

برای حل اولین مشکل ، کد html زیر را درست بعد از برچسب باز کردن بدنه قرار دهید:

برای پیش بارگذار ما ، ما به سبک نیاز داریم ، اما نمی خواهیم به پرونده های خارجی وابسته باشیم ، بنابراین سبک ها را مستقیماً در سند ، جایی در داخل سر قرار می دهیم:

# page-preloader (موقعیت: ثابت؛ چپ: 0؛ بالا: 0؛ راست: 0؛ پایین: 0؛ پس زمینه: # 000؛ z-index: 100500؛) # page-preloader. spinner (عرض: 32px؛ ارتفاع: 32px ؛ موقعیت: مطلق ؛ چپ: 50٪ ؛ بالا: 50٪ ؛ پس زمینه: url ("/ images / spinner.gif") بدون تکرار 50٪ 50٪؛ حاشیه: -16px 0 0 -16px؛)

متأسفانه ، من نمی توانم منابع خارجی را به طور کامل کنار بگذارم ، زیرا ما به یک تصویر متحرک GIF نیاز داریم. اما با توجه به کوچک بودن اندازه تصویر ، این یک فداکاری قابل قبول است.

اکنون تنها چیزی که باقی مانده این است که پس از بارگذاری صفحه ، پیش بارگذار خود را مخفی کنیم. در اینجا دیگر محدودیت منابع نداریم ، بنابراین می توانیم از jQuery استفاده کنیم:

$ (پنجره) .on ("بارگیری" ، تابع () (var $ preloader \u003d $ ("# page-preloader")، $ spinner \u003d $ preloader.find (". spinner")؛ $ spinner.fadeOut ()؛ $ preloader.delay (350) .fadeOut ("کند")؛))؛

انجام شده! اکنون ، به جای اینکه طرح به جهات مختلف بپرد ، بازدید کننده هنگام بارگیری صفحه ، صفحه بارگیری مرتب ما را مشاهده خواهد کرد. نسخه قابل استفاده از چنین پیش بارگیری را می توان در وب سایت مشاهده کرد