Classic Cards Loading Glitch

Hi,

When Classic Cards loads on my site, it starts out stacked and then spreads out. Is there a fix for this? I’ve attached a screenshot for you to see.

Thanks,
Jen

Hi Jen,

Thanks for writing in! To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

Thank you.

I will do a security note as the site is in staging and not available live to look at. Thanks.

Hi again,

Thank you for providing the URL. This is happening due to the cards being loaded earlier than the images. So best way to resolve the issue is to display a loader until the page loads completely on that specific page. To do this, first add the following code in the Theme Options > CSS:

.loader,
        .loader:after {
            border-radius: 50%;
            width: 10em;
            height: 10em;
        }
        .loader {            
            margin: 0 auto;
            font-size: 10px;
            position: relative;
            text-indent: -9999em;
            border-top: 1.1em solid rgba(255, 255, 255, 0.2);
            border-right: 1.1em solid rgba(255, 255, 255, 0.2);
            border-bottom: 1.1em solid rgba(255, 255, 255, 0.2);
            border-left: 1.1em solid #ffffff;
            -webkit-transform: translateZ(0);
            -ms-transform: translateZ(0);
            transform: translateZ(0);
            -webkit-animation: load8 1.1s infinite linear;
            animation: load8 1.1s infinite linear;
          top: 50%;
           transform: translateY(-50%);
        }
        @-webkit-keyframes load8 {
            0% {
                -webkit-transform: rotate(0deg);
                transform: rotate(0deg);
            }
            100% {
                -webkit-transform: rotate(360deg);
                transform: rotate(360deg);
            }
        }
        @keyframes load8 {
            0% {
                -webkit-transform: rotate(0deg);
                transform: rotate(0deg);
            }
            100% {
                -webkit-transform: rotate(360deg);
                transform: rotate(360deg);
            }
        }
        #loadingDiv {
            position: fixed;
            top:0;
            left:0;
            width:100%;
            height:100%;
            background-color:#000;
          z-index: 9999;
        }

Then add the following code in the Theme Options > JS:

jQuery('body.page-id-1366').append('<div style="" id="loadingDiv"><div class="loader">Loading...</div></div>');
jQuery(window).on('load', function(){
  setTimeout(removeLoader, 2000); //wait for page load PLUS two seconds.
});
function removeLoader(){
    jQuery( "#loadingDiv" ).fadeOut(500, function() {
      // fadeOut complete. Remove the loading div
      jQuery( "#loadingDiv" ).remove(); //makes page more lightweight 
  });  
}

Don’t forget to clear all caches including your browser’s cache after adding the code. Hope this helps!

Thank you! That works. I was able to change background to match my site and was wondering if it’s possible to keep the header and footer on the page while the content loads.

Thanks again,
Jen

Hi Jen,

Sorry but I am not entirely certain of what you’re trying to do. You have a custom loading screen, that should keep your page content show up together.

You can also follow some of the performance tips here to make your site loading faster.

Thanks,

Hi,

The loading page doesn’t have the header or footer on it. That goes away while the content loads. Is it possible to have the content load within the template so that the header and footer are on page before the content loads? I’ve attached a screenshot of what the loading page looks like.

Thanks,
Jen

Hello Jen,

Thanks for the updates. I have updated the code and ended up using this:

jQuery('body.page-id-1366 #cs-content').append('<div style="" id="loadingDiv"><div class="loader">Loading...</div></div>');
jQuery(window).on('load', function(){
  setTimeout(removeLoader, 2000); //wait for page load PLUS two seconds.
});
function removeLoader(){
    jQuery( "#loadingDiv" ).fadeOut(500, function() {
      // fadeOut complete. Remove the loading div
      jQuery( "#loadingDiv" ).remove(); //makes page more lightweight 
      jQuery( "#cs-content .x-section" ).addClass('loaded');
  });  
}
/*Preload*/
.loader,
.loader:after {
    border-radius: 50%;
    width: 10em;
    height: 10em;
}

.loader {            
    margin: 0 auto;
    font-size: 10px;
    position: relative;
    text-indent: -9999em;
    border-top: 1.1em solid rgba(255, 255, 255, 0.2);
    border-right: 1.1em solid rgba(255, 255, 255, 0.2);
    border-bottom: 1.1em solid rgba(255, 255, 255, 0.2);
    border-left: 1.1em solid #ffffff;
    -webkit-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-animation: load8 1.1s infinite linear;
    animation: load8 1.1s infinite linear;
    top: 10%;
    transform: translateY(-50%);
}

@-webkit-keyframes load8 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
@keyframes load8 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

#loadingDiv {
    position: absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;  background-image: url('http://www.tylerwislerhome.com/wordpress/new-site/wp-content/uploads/2018/07/chevron-seamless-bkgd-lg.png');
    background-size: cover;
    background-attachment: fixed;
    z-index: 9999;
}


.page-id-1366 #cs-content .x-section {
  opacity: 0;
  transition: opacity 0.5s ease;
}

.page-id-1366 #cs-content .x-section.loaded {
  opacity: 1;
}

Please check the page now.

Thank you! I was checking the page and noticed it and that works great. :slight_smile:

You’re welcome!
We’re glad we were able to help you out.

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.