Member Avatar for umeshMCA

hi i am a new user of asp.net,
i would like to know when user open mysite it will display a image for somethime like 20sec till that there should be a gif image also show which showing uploading website like buffring in utv bideo gif. and after timeout it will redirect to my another page. means i want to show that image for 20sec than open my website.
thanks

Regards
Umesh Daiya

  • 2 Contributors
  • 2 Replies
  • 218 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by umeshMCA

Dani AI

Generated

A few practical improvements on the idea in this thread: a client-side timer is the right direction, but prefer a single one-shot timer (not a repeating redirect), preload the GIF so the animation starts immediately, and give users a visible "Skip" option and a noscript fallback. A 20‑second forced wait is long on mobile and will increase bounces—consider a shorter delay or a real progress indicator if you are doing background work.

Example splash page (preload, centered GIF, countdown, skip link, meta-refresh fallback):

<!-- splash.aspx -->
<head>
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <link rel="preload" as="image" href="/images/loading.gif">
  <meta http-equiv="refresh" content="20;url=page1.aspx" />
  <style>
    #splash { position:fixed; top:0; left:0; right:0; bottom:0;
              display:flex; align-items:center; justify-content:center;
              background:#fff; z-index:9999; }
    #splash .box { text-align:center; }
    #countdown { margin-top:8px; font-family:Arial, sans-serif; }
    #skip { display:inline-block; margin-top:6px; }
  </style>
</head>
<body>
  <div id="splash" role="dialog" aria-modal="true" aria-label="Loading">
    <div class="box">
      <img id="splashImg" src="/images/loading.gif" alt="Loading site, please wait" />
      <div id="countdown" aria-live="polite">20</div>
      <div><a id="skip" href="page1.aspx">Skip</a></div>
    </div>
  </div>

  <script>
    document.addEventListener('DOMContentLoaded', function () {
      var seconds = 20;
      var countdown = document.getElementById('countdown');

      var tick = setInterval(function () {
        seconds--;
        countdown.textContent = seconds;
        if (seconds <= 0) clearInterval(tick);
      }, 1000);

      var redirect = setTimeout(function () {
        window.location.href = 'page1.aspx';
      }, 20000);

      document.getElementById('skip').addEventListener('click', function () {
        clearTimeout(redirect);
        clearInterval(tick);
      }, false);

      (new Image()).src = '/images/loading.gif';
    });
  </script>
</body>

Notes and testing tips: the meta refresh is a graceful fallback for users with JavaScript disabled; add aria-live/role="status" so screen readers get the countdown; test on slow connections and background tabs (some browsers throttle or pause animations); verify the GIF is cached or preloaded to avoid a blank first frame. 's suggestion to use JavaScript was the right start—switch to a one-shot setTimeout for the redirect and add the UX/accessibility touches above.

Recommended Answers

All 2 Replies

Member Avatar for kvprajapati

You need to write JavaScript routine.

<head runat="server">
    <title></title>
    <style  type="text/css">
      .box
      {
          height:100px;
          width:300px;
          background:#e0e3e3;
          border:2px solid black;
      }
    </style>
    <script type="text/javascript">
        window.onload = function () {
            setInterval(function () {
                window.document.location.href = "page1.aspx";
            }, 2000); //2 second
        };
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div class="box">
       <img src="images/img1.png" alt="Please wait" />
    </div>
    </form>
</body>
Member Avatar for umeshMCA

You need to write JavaScript routine.

<head runat="server">
    <title></title>
    <style  type="text/css">
      .box
      {
          height:100px;
          width:300px;
          background:#e0e3e3;
          border:2px solid black;
      }
    </style>
    <script type="text/javascript">
        window.onload = function () {
            setInterval(function () {
                window.document.location.href = "page1.aspx";
            }, 2000); //2 second
        };
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div class="box">
       <img src="images/img1.png" alt="Please wait" />
    </div>
    </form>
</body>

Thanks for reply

regards
umesh daiya

Edited by umeshMCA because: n/a
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.