Back

Technologies:

javascriptjavascript
htmlhtml
phpphp
avatar
Tolerim
a month ago

What is the technique to eliminate a blank page during the loading process?

A website was built using a Wordpress template, with a core feature being the ability for users to post work projects. A preloader was added in the form of a spinning wheel on all pages to indicate that the page is loading and is hidden once the page has finished loading. However, when posting a new project for the first time and clicking the "pay now" button on the final page, it takes a long time to load (around 10-15s), and nothing is displayed while it loads (as shown in the images below). The following script was attempted to redisplay the preloader if the browser was stuck on the old page, but had no effect. The preloader only fails to work the first time the user posts a project, and will work quickly if the user goes back a page once the project has been posted. Can anyone help identifying why the preloader does not work the first time around? Here is the preloader code:

<script>
    const payNowBtn = document.querySelector('.postbidbtn');
    payNowBtn.addEventListener('click', function(){
        var loadingWheel = document.getElementById('wheel')
        loadingWheel.style.display = 'block'
    });
</script>
<div class="preloader" id="wheel">
    <div class="loader">
        <div class="ytp-spinner">
            <div class="ytp-spinner-container">
                <div class="ytp-spinner-rotator">
                    <div class="ytp-spinner-left">
                        <div class="ytp-spinner-circle"></div>
                    </div>
                    <div class="ytp-spinner-right">
                        <div class="ytp-spinner-circle"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
As well as the code for the page that takes a long time to load:

function ProjectThememyaccountpaywithcreditsarea_function()
{
        global $currentuser, $wpdb, $wpquery;
        $currentuser = wpgetcurrentuser();
        $uid = $current_user->ID;
        $pid = $_GET['pid'];
        $postar = getpost($pid);
        
        doaction('ptfordemowork30');
?>

     <div class="account-main-area col-xs-12 col-sm-8 col-md-8 col-lg-9">
         <div class="mybox3 borderbottom_0">

            <div class="boxtitle"><?php e("Pay with virtual currency",'ProjectTheme'); ?></div>
            
            <div class="box_content">
                <div class="post noborderbtm" id="post-<?php the_ID(); ?>">
                    <div class="image_holder">
                        <a href="<?php echo getpermalink($pid); ?>"><img width="45" height="45" class="imageclass"
                        src="<?php echo ProjectThemegetfirstpostimage($pid,45,45); ?>" /></a>
                    </div>
                    
                    <div  class="title_holder" >
                         <h2><a href="<?php echo getpermalink($pid) ?>" rel="bookmark" title="Permanent Link to <?php echo $postar->post_title; ?>">
                            <?php echo $postar->posttitle; ?></a></h2>
                    </div>
                    <?php
                        if(isset($_GET['pay'])):
                            echo '<div class="detailsholder sksk_class">';
                                $postar    = getpost($pid);
                                $cr     = projectThemegetcredits($uid);
                                $bid    = projectThemegetwinner_bid($pid);
                                $amount = $bid->bid;

                                if($cr < $amount) { 
                                    echo '<div class="error2">'; 
                                    echo ('You do not have enough credits to pay for this project.','ProjectTheme');
                                    echo '</div><div class="clear10 flt_lft"></div>';
                                }

                                echo '<div class="tripp">';
                                echo '<a class="postbidbtn" href="'.ProjectThemegetpaymentspageurl('deposit').'">'.('Add More Credits','ProjectTheme').'sendemailtoproject_payer($pid, $uid, $bid->uid, $amount, '1');
                                echo ('Your payment has been sent.','ProjectTheme');
                            }
                            echo '</div>';
                        else:
                    ?>
                    <div class="detailsholder sksk_class">
                        <b>('The price for the project is','ProjectTheme'); ?>: <?php $bid = projectThemegetwinnerbid($pid); echo projectThemegetshowprice($bid->bid); ?></b>
                        <br/><br/>
                        <?php e("Your credits amount",'ProjectTheme'); ?>: <?php echo projectThemegetcredits($uid); ?> <?php echo projectThemecurrency(); ?> <br/><br/>
                        <a class="postbidbtn" href="<?php echo ProjectThemegetpaywithcreditspageurl($pid, '&pay=yes'); ?>"><?php echo ('Pay Now','ProjectTheme'); ?></a>
                        <a class="postbidbtn" href="getpaymentspageurl('deposit'); ?>"><?php echo ('Add More Credits','ProjectTheme'); ?></a>
                    </div>
                    <?php endif; ?>
               </div></div>
          </div>
       <?php
enter image description here enter image description here enter image description here

Answers(2)
avatar
Vogi
25 days ago
Verified Answer
It seems that the preloader code you provided is not the issue here. The problem might be related to the cache or the browser request matching the preload request. You can try turning off caching to see what happens. Also, it is possible that the preloader is not working because it is not the first element on the page. You can try moving it to be the first element on the page. I hope this helps!

Sources

Preloader does not load as first element | WordPress.orgCommon Problems With rel="preload" | DebugBearPreloader not working !!! - Adobe Support Community - 4037205Preloader does not preload and loads the page a second timePreloader does not work. - Intel Communitiesjavascript - Preloader not working - Stack Overflow
avatar
Tolerim
a month ago
The issue with the preloader not displaying the first time around could be due to the fact that the page is taking too long to load and the preloader script is not being executed until the page has already loaded. To fix this, you can try using the window.onload event listener which will make sure that the preloader element is displayed before the page has fully loaded. Here's an updated version of the preloader code: 
<div class="preloader" id="wheel">
  <div class="loader">
    <div class="ytp-spinner">
      <div class="ytp-spinner-container">
        <div class="ytp-spinner-rotator">
          <div class="ytp-spinner-left">
            <div class="ytp-spinner-circle"></div>
          </div>
          <div class="ytp-spinner-right">
            <div class="ytp-spinner-circle"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<script>
  window.onload = function() {
    const payNowBtn = document.querySelector('.post_bid_btn');
    payNowBtn.addEventListener('click', function() {
      var loadingWheel = document.getElementById('wheel');
      loadingWheel.style.display = 'block';
    });
  };
</script>
As for the long load time of the page, it could be due to a number of factors such as server response time, large image sizes or poorly optimized code. However, without more information it's difficult to pinpoint the exact cause.
;