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

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

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

1. < div id ="preloaderbg" class ="centerbg1" >
2. < div class ="centerbg2" >
3. < div id ="preloader" >
6. < script type ="text/javascript" >
7. document .getElementById("preloaderbg").style.display = "block" ;

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

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

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

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

2. document .body.style.overflow = "قابل مشاهده" ;

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

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

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

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

و پس از دانلود مراحل زیر را انجام دهید:

1. clearInterval (pbPos)؛
2. document .getElementById("loaderbg").style.display = "none" ;

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

نتیجه کار قابل مشاهده است.

این روش دارای معایبی است - اگر Preloader را طوری تنظیم کنید که در onload مخفی شود، یعنی. هنگامی که منتظر بارگذاری همه تصاویر است، کاربر ممکن است فکر کند که صفحه فقط آویزان شده است - در واقع، به غیر از انیمیشن، هیچ اتفاقی نمی افتد. اگر روی $(document).ready() از 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 پیکسل و عرض نوار اسکرول ما ( مثال داده شدهباگ بدون آن در اینترنت اکسپلورر، و من هنوز راه دیگری برای تراز کردن نوار پیشرفت در مرکز divs پیدا نکرده ام).
سبک ها مانند روش قبلی هستند با این تفاوت که

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

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

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

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

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

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

< script type ="text/javascript" >
dLoader.start("progbarfg" , 333, "count" );

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

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

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

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

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

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

1. تابع fn(بازگشت تماس)(
2. $.get("/" , params , function (داده)( someHandler(data); eval(callBack); ));

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

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

1. $داده["js"] = آرایه(
2. آرایه ("path" => "jquery-1.2.6.min.js" , "size" => file size($jsRoot."/jquery-1.2.6.min.js" ))،
3. آرایه ("path" => "functions.js"، "size" => file size($jsRoot."/functions.js" ))
4. $data ["im" ] = GetFiles($imgRoot، true );
5. $data["Invoke"] = آرایه(
6. "action" => "loadTemplates" ,
7. "size" => GetDirSize(dirname(__FILE__)."/design/ajax templates/" , false )
8. $data["jspath" ] = "/design/js/" ;
9. $data["impath" ] = "/design/im" ;

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

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

همچنین راهی برای سفارشی کردن فرآیند بوت وجود دارد.

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

چگونه یک پیش بارگذاری برای یک وب سایت بسازیم

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

این انیمیشن را می توان روی لوگوی متنی یا هر متنی مانند نام شرکت یا شعار قرار داد.

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

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

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

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

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

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

فرآیند خلقت

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

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

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

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

برای Preloader خود، به استایل‌ها نیاز داریم، اما نمی‌خواهیم به فایل‌های خارجی وابسته باشیم، بنابراین استایل‌ها را درست در سند، جایی در قسمت head قرار می‌دهیم:

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

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

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

$(window).on("load"، تابع () ( var $preloader = $("#page-preloader")، $spinner = $preloader.find(".spinner")؛ $spinner.fadeOut(); $preloader.delay(350).fadeOut("آهسته"); ));

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