یکی از رویدادهایی که در صفحات وب اتفاق می افتد ، رویداد submit هست که در زمان ارسال فرم اتفاق می افتد و از لحظه فشرده شدن دکمه سابمیت فرم آغاز و تا اتمام ارسال کامل فرم به سمت سرور ادامه دارد ، لذا ما می توانیم یک تصویر لودینگ در صفحه قرار بدیم که خاصیت display آن برابر none باشه و در زمان ارسال فرم که رویداد submit اتفاق می افته display این تصویر رو در طول سابمت شدن فرم با استفاده از جاوا اسکریپت و جی کوئری نمایش دهیم:
که اگر برای مختصر نویسی از سینتکس جی کوئری استفاده کنید باید کتابخونه جی کوئری رو نیز دانلود و به صفحه تون لینک کنید که دقیقا به شکل زیر خواهد بود :
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Submit And Loading</title> <script src="js/jquery.min.js"></script> <style> .screen { display: none; width: 100%; height: 100%; position: fixed; top: 0; right: 0; z-index: 10; background:rgba(0,0,0,0.4); } .screen img { position: absolute; top: 50%; right: 49%; z-index: 100; } </style> </head> <body> <div class="screen"><img src="images/loading.gif"></div> <form action="" id="Form"> <input type="submit" value="Submit"> </form> <script> $(document).ready(function () { $("#Form").submit(function(){ $(".screen").css('display','block'); }); }); </script> </body> </html>
جهت دانلود آخرین نسخه کتابخونه جی کوئری به سایت جی کوئری مراجعه کنید و پس از دانلود که یک فایل با پسوند js هست رو با تگ <script> در قسمت head صفحه مثل نمونه کد بالا به سند تون لینک کنید.
من در اینجا هر دو فایل رو (تصویر لودینگ و فایل جی کوئری) قرار میدم ولی سعی کنید جی کوئری رو از سایت اصلیش دانلود کنید
دریافت
حجم: 40.3 کیلوبایت
توضیحات: فایل جی کوئری و تصویر لودینگ