CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Mark
Mark

Reputation: 1687

Can an image to be shown while it is uploaded?

I have seen many variations to answer this question and while many of them apparently work for others based on the feedback; none of them work for me.

Among the answers that I've come across they all seem to suggest some variant of the answer posted here: How to show Page Loading div until the page has finished loading

The problem I believe I am having is likely my lack of comprehending how anything can be rendered on a page until the life cycle of the page has completed?

This seems to make the most sense for me to describe my issue attempting to implement any of the solutions that have been provided.

In every instance the div containing my loading image is displayed after the complete load of the page which is too late.

I can see the implementations working as intended for Ajax calls to the server after the page has loaded; and I can also see implementation of Update Panels and etc. to facilitate in partial page rendering to further assist in the targeted effect. I just don't understand nor have been able to get it to work "while" the initial load of the page is happening.

What am I missing?

In script tag:

<script>
    showProgress();
    function ShowProgress() {
    $('.loading').show();
};
</script>

Immediately beneath the body tag:

<body>
   <div class="loading">
    Loading...
      <img src="../Images/spinner.gif" width="200" height="200" />
   </div>
</body>

This has been the most basic and simplistic implementation that I've performed but the div only loads after the page load has completed in every instance.

I have tried several other permutations but they all render the same result.

So my question, can a load indicator be implemented ON the same page that is loading. My efforts so far indicate the answer is no but perhaps I am missing some key element.

ADDED:

There is "a lot" of preliminary work that is being performed Server Side prior to the completion of the Page load so since I'm being told that this should work; perhaps implementation of a Server-Side ScriptManager to invoke the client code during the early phases of the Page Life Cycle may facilitate in assuring the div is rendered early in the stage may help?

I'm just speculating at this point but unfortunately, under the circumstances it would be extremely difficult if not impossible for me to provide an illustration of the issue using the existing code.

I will however see if I can mimic the wait time in a prototype and post the code here; provided the results are the same.

==========================

UPDATE

So the good news is that I actually can successfully emulate the issue in a scaled down prototype. Unfortunately, the bad news is that the only answer posted does not resolve the problem. And I "think" the answer would likely work under the conditions of pure HTML markup however in ASP.NET the page rendering process works a bit differently.

Here is the code. I have added a worker thread to emulate the wait for server side calls of the actual application but you will note that neither versions of the code with proposed solutions work.

Also, there is one issue with the proposed answer when running on IE. More specifically noted on IE11.

JavaScript runtime error: Unable to get property 'appendChild' of undefined or null reference occurs at line document.body.appendChild(div); Although, I'm fairly certain it is an IE issue; it doesn't throw the error in Chrome but the loading image is never loaded either.

The Code Behind:

public partial class Default : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        if (PerformWork())
            return;
    }
    protected bool PerformWork()
    {
        var time = new TimeSpan(0, 0, 20);
        Thread.Sleep(time);
        return true;
    }
}

The markup with the simple version that I'd initially posted:

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script>
    showProgress();
    function ShowProgress() {
    $('.loading').show();
};
</script>
<body>
    <form id="form1" runat="server"> 
        <div class="loading">
            Loading...
              <img src="../Images/spinner.gif" width="200" height="200" />
        </div>
    </form>
</body>
</html>

The markup with the only proposed answer so far:

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script>
        (function () {
            var div = document.createElement('div');
            div.id = 'loader';
            div.setAttribute('style', 'position:absolute; left:0; top:0; background:white; color:red;');
            div.textContent = 'Loading...plz wait!!!'

            var loadImg = document.createElement('img');
            loadImg.src = 'http://downgraf.com/wp-content/uploads/2014/09/01-progress.gif';
            loadImg.width = 50;
            loadImg.height = 50;
            div.appendChild(loadImg);
            document.body.appendChild(div);
        })();

        window.onload = function () {
            document.querySelector('#loader').remove();
            // when page load completes it removes the loader div.
        };
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <img src='http://www.hd-freewallpapers.com/tpl/download.php?filename=best-high-quality-hd-wallpapers-3D-2560x1440.jpg' alt='' />
        <img src='http://www.hd-freewallpapers.com/tpl/download.php?filename=best-quality-hd-wallpapers-free-download-3D-2560x1440.jpg' alt='' />
        <img src='http://www.hd-freewallpapers.com/tpl/download.php?filename=butterfly-wallpaper-for-computer-2560x1440.jpg' alt='' />
    </div>
    </form>
</body>
</html>

Upvotes: 0

Views: 134

Answers (1)

Jai
Jai

Reputation: 74738

You can do something like, make a dynamic div while page is loading and push it in the document and when page gets loaded just remove it from the page: 

// This IIFE will execute as soon as page is in the window. This creates a dynamic div and 
// a dynamic img with a gif src and appends it in the document.
(function() {
  var div = document.createElement('div');
  div.id = 'loader';
  div.setAttribute('style', 'position:absolute; left:0; top:0; background:white; color:red;');
  div.textContent = 'Loading...plz wait!!!'
  
  var loadImg = document.createElement('img');
  loadImg.src = 'http://downgraf.com/wp-content/uploads/2014/09/01-progress.gif';
  loadImg.width=50;
  loadImg.height=50;
  div.appendChild(loadImg);
  document.body.appendChild(div);
})();

window.onload = function() {
  document.querySelector('#loader').remove();
  // when page load completes it removes the loader div.
};
<img src='http://www.hd-freewallpapers.com/tpl/download.php?filename=best-high-quality-hd-wallpapers-3D-2560x1440.jpg' alt=''>
<img src='http://www.hd-freewallpapers.com/tpl/download.php?filename=best-quality-hd-wallpapers-free-download-3D-2560x1440.jpg' alt=''>
<img src='http://www.hd-freewallpapers.com/tpl/download.php?filename=butterfly-wallpaper-for-computer-2560x1440.jpg' alt=''>

Here window.onload will ensure that each element of the page has been loaded.

Upvotes: 1

Related Questions