Image Not Hiding after Returning as Previous Page

Question

I display a loading screen after a button is clicked (which unhides the image), which then loads up another page. This works fine.

However, if the user clicks "Previous Page" and returns. My loading screen appears, so it is not hidden. It is fine if I manually refresh this page.

Here is my code. In html:

<input id="saveForm" class="btn btn-info" type="submit" name="submit" value="Submit" onclick="load()"/>
<script>
     function load() {
          document.getElementById('loader').style.display='block';              
     }
</script>

<img class="load_spinner" id="loader" style="display:none;"/>

In css:

.load_spinner {
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 9999;
    opacity: 0.5;
    background: url(/static/img/Preloader_2.gif) center no-repeat #fff;
}

What should I do to hide the loading screen if the user returns?

You need to use a callback in your form to hide the loader again before change page. — Souza, Jul 04 '19 at 20:27

score 0 · Answer 1 · answered Jul 03 '19 at 23:51

0

Use the same technique from my answer here and use localStorage:

window.onload = function() {
  if (!localStorage.getItem("firstVisit")) {
    localStorage.setItem("firstVisit", "true");
  } else {
    document.getElementById("loader").style.display = "none";
};

Or actually remove it:

document.getElementById("loader").parentNode.removeChild(document.getElementById("loader"));

answered Jul 03 '19 at 23:51

Jack Bashford

43,180
11
50
79

I just tried it — it seems that it's not calling .onload when the user presses for previous page (but does when I initially load it). And hence, the function does not get called. – Shawn Zhang Jul 04 '19 at 00:05
That's weird. What function *would* be called is the obvious question... – Jack Bashford Jul 04 '19 at 00:06
I figured it out. Looks like going to the previous page doesn't actually refresh the page. Instead, I can call an event listener when the page shows up. – Shawn Zhang Jul 04 '19 at 20:23

score 0 · Accepted Answer · answered Jul 04 '19 at 20:22

0

I figured out a way to do so, following Jack Bashford's answer. By putting,

window.addEventListener( "pageshow", function ( event ) {
     document.getElementById("loader").style.display = "none";
});

I effectively hide my image.

answered Jul 04 '19 at 20:22

Shawn Zhang

1,719
2
14
20

Image Not Hiding after Returning as Previous Page

2 Answers2