Waiting/Loading image or message while PHP loads

Question

I am trying to figure out how to display an image while PHP runs and disappears after.

I grabbed this code from a site, but the image only shows very briefly at the very end of the PHP loading. It doesn't show when the page initially opens and it only seems to run once.

I have read many and many of websites and threads on here, but I can't figure out what is missing in this simple example. Is there a better way to do this? Or is this it and I just need to fix it?

THANK YOU in advance!

<html>
  <head>
    <title>Home</title> 
  <style>
    /* This only works with JavaScript, 
    if it's not present, don't show loader */
   .no-js #loader { display: none;  }
    .js #loader { display: block; position: absolute; left: 100px; top: 0; }
    .se-pre-con {
        position: fixed;
        left: 0px;
        top: 0px;
        width: 100%;
        height: 100%;
        z-index: 9999;
        background: url(http://smallenvelop.com/wp-content/uploads/2014/08/Preloader_51.gif) center no-repeat #fff;
    }
  </style>

  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
  <script src="http://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.2/modernizr.js"></script>
  <script>
    // Wait for window load
    $(window).load(function() {
      // Animate loader off screen
      $(".se-pre-con").fadeOut("slow");;
   });
  </script>

  </head>

  <body>
    <div id="loader" class="se-pre-con"></div>
    <?php
        include 'content/screen.php';
    ?>
  </body>

</html>

Is there any reason you can't put it in a jquery/js directly? — Steven Dropper, Mar 16 '16 at 20:30
You could return data through json on load, so that if the php isnt loaded the json wouldnt return value which would cause the system to return the loading image — Steven Dropper, Mar 16 '16 at 20:32
Possible duplicate of [Show image while page is loading](http://stackoverflow.com/questions/3535020/show-image-while-page-is-loading) — pydsigner, Mar 16 '16 at 20:54
@pydsigner I agree, it could be a duplicate. But I've read that thread and I don't know how to apply it to this code. It might be an easy fix... I'm hoping someone can point out the 1-2 lines that are incorrect or need to be added because I'm just banging my head against the wall. — Alex, Mar 16 '16 at 21:46

Alex · Accepted Answer · 2016-03-17T07:28:26.907

SOLVED! I found and modified this AJAX code that worked for exactly what I was looking for (same page load with multiple options on what to load (by links). Thanks for all of the helpful messages directing me on the right path! This community is awesome!

<head>
    <title>Demo</title>
<style>
    #fade {
        display: none;
        position:absolute;
        top: 0%;
        left: 0%;
        width: 100%;
        height: 100%;
        background-color: #ababab;
        z-index: 1001;
        -moz-opacity: 0.8;
        opacity: .70;
        filter: alpha(opacity=80);
    }
    #modal {
        display: none;
        position: absolute;
        top: 45%;
        left: 45%;
        width: 64px;
        height: 64px;
        padding:30px 15px 0px;
        border: 3px solid #ababab;
        box-shadow:1px 1px 10px #ababab;
        border-radius:20px;
        background-color: white;
        z-index: 1002;
        text-align:center;
        overflow: auto;
    }
</style>
<script>
    function openModal() {
        document.getElementById('modal').style.display = 'block';
        document.getElementById('fade').style.display = 'block';
    }

    function closeModal() {
        document.getElementById('modal').style.display = 'none';
        document.getElementById('fade').style.display = 'none';
    }

    function loadAjax(page) {
        document.getElementById('results').innerHTML = '';
        openModal();
        var xhr = false;
        if (window.XMLHttpRequest) {
            xhr = new XMLHttpRequest();
        }
        else {
            xhr = new ActiveXObject("Microsoft.XMLHTTP");
        }
        if (xhr) {
            xhr.onreadystatechange = function () {
                if (xhr.readyState == 4 && xhr.status == 200) {
                    closeModal();
                    document.getElementById("results").innerHTML = xhr.responseText;
                }
            }
            xhr.open("GET", "content/"+page+".php", true);
            xhr.send(null);
        }
    }
</script>
</head>
<body>
    <div id="content">
        <a href="javascript: void(0);loadAjax('page1');">Click to load page 1</a><br/><br/>
        <a href="javascript: void(0);loadAjax('page2');">Click to load page 2</a><br/><br/>
        <div id="results"><!-- Results are displayed here --></div>
        <div id="fade"></div>
        <div id="modal">
            <img id="loader" src="loading.gif" />
        </div>
    </div>
</body>
</html>

score 0 · Answer 2 · edited May 23 '17 at 12:15

0

PHP always (unless specifically told not to) buffers the output before printing it. That means that when you actually print, PHP just stores the output text in the memory. After everything is printed, the contents stored in the memory gets printed and the memory gets flushed. It is not only PHP that does that. Almost all the I/O libraries across many languages and platforms has this feature, which is generally enabled by default.

Here is a relevant link that shows all the possible options to bypass or disable this feature. I personally think that you shouldn't disable it because the image will still need to be loaded and you won't be able to control the latency between PHP loading and image loading. I think in this situation maybe a solution that involved Ajax is more suitable for your needs.

Are you trying to show a loading animation/image for the PHP operation? If yes, then you should definitely do it with Ajax on a separate action.

Edit: sorry about not pasting the link: How to disable output buffering in PHP

edited May 23 '17 at 12:15

Community

1
1

answered Mar 16 '16 at 20:34

Gasim

7,615
14
64
131

1

You seem to have forgotten to provide the link you are mentioning – DarkBee Mar 16 '16 at 20:58
Thank you for mentioning. It must have slipped my mind – Gasim Mar 16 '16 at 23:58
@Gasim I'd be open to using Ajax, it just looked more confusing. I am looking for a good, clean example. – Alex Mar 17 '16 at 02:39
@Alex you need to have two files. One for html and one for php. Html loads the php file through ajax – Gasim Mar 17 '16 at 10:41

score 0 · Answer 3 · edited May 23 '17 at 10:28

0

It has all to do with the output buffering PHP applies.

This Stack Overflow link explains why it doesn't work as expected, a possible way to make it work and why you shouldn't make it work that way.

edited May 23 '17 at 10:28

Community

1
1

answered Mar 16 '16 at 20:55

DigiLive

1,093
1
11
28

so how would I implement something similar that is recommended? It'd be nice to know a page is loading and some error didn't just occur. – Alex Mar 17 '16 at 02:37

score 0 · Answer 4 · edited May 23 '17 at 11:59

0

Here's how to apply Show image while page is loading to your situation.

Replace your php tag with a div like this:

<div id="main"></div>

Then change your fadeout script like this:

<script>
    $(document).ready(function() {
        $("#main").load("content/screen.php", function () {
            // Animate loader off screen
            $(".se-pre-con").fadeOut("slow");
        });
    });
</script>

edited May 23 '17 at 11:59

Community

1
1

answered Mar 16 '16 at 22:10

pydsigner

2,779
1
20
33

`$.load` is async so your code will fade out the image before php loads – Gasim Mar 17 '16 at 00:01
Unfortunately, this didn't work any better than the original code. It still shows very briefly right before loaded. – Alex Mar 17 '16 at 02:35
@Alex is this better? – pydsigner Mar 17 '16 at 06:53

Waiting/Loading image or message while PHP loads

4 Answers4