نمایش عکس loading در زمان لود شدن وب سایت

Question

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

Answer 1

با استفاده از کد jQuery زیر براحتی می توانید این کار را انجام دهید:

<script type="text/javascript">
// <![CDATA[
$(window).load(function() { $("#spinner").fadeOut("slow"); })
// ]]>
</script>

می توانید css زیر را نیز اضافه کنید:

#spinner {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 9999;
background: url(your/image/path/loading.png) 50% 50% no-repeat #ede9df;
}

و در نهایت تگ div زیر را در ابتدای تگ body اضافه کنید:

<div id="spinner"></div>

Answer 2

یک عکس که پیغام loading مورد نظر شما را دارد درون یک div قرار دهید و درست پس از تگ body صفحه اصلی برنامه خود قرار دهید و با استفاده از CSS آن div را در مرکز صفحه قرار دهید:

    <div class="loadingIndicator">
        <img src="images/loading.gif" width="16" height="16" style="margin-right:8px;float:left;vertical-align:top;"/>Loading<br/>
        <span id="loadingMsg">Loading application...</span>
    </div>

سپس در اولین خط برنامه full ajax خود تگ div را از dom حذف کنید.