یکی از رویدادهایی که در صفحات وب اتفاق می افتد ، رویداد 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 کیلوبایت
توضیحات: فایل جی کوئری و تصویر لودینگ