locked
full content page load (not partial) with a preloader RRS feed

  • Question

  • User-418973555 posted

    there are some html5 websites with full content eg. large image and background video, 

    and those websites have preloading , 

    tried to develop those preloading effect, but after showing preloading icon, it still showing partial rendering to full content, (eg. large background)

    eg. 

        <script>
           $(document).ready(function() {
                //Preloader
                $(window).on("load", function() {
                preloaderFadeOutTime = 500;
                function hidePreloader() {
                var preloader = $('.preloader');
                preloader.fadeOut(preloaderFadeOutTime);
                }
                hidePreloader();
                });
                });
    
        </script>

    Tuesday, May 21, 2019 3:47 AM

Answers

  • User665608656 posted

    Hi larnvok,

    To determine whether all content on the page has been loaded, you could only use the window.onload = function () {} event to hide loading div after page loading is completed.

    A Windows load event fires when all the content on your page is fully loaded including the DOM (document object model) content and asynchronous JavaScript, frames and images

    For more information, you could refer to this link: 
     
    https://forums.asp.net/t/2122948.aspx?difference+between+window+onload+function+and+function+pageLoad+

    You could also refer to the codes as below:

    <script>  
        window.onload = function () {
            var loadingMask = document.getElementById('loadingDiv');
            loadingMask.parentNode.removeChild(loadingMask);
        }
    </script>

    Best Regards,

    YongQing.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, May 24, 2019 8:21 AM

All replies

  • User665608656 posted

    Hi larnvok,

    According to the code you provide, fadeOut is just a jQuery animation disappearance event. Your loading div will disappear according to a special timespan.

    I recommend that you use listening events in JS to monitor whether the current page has been loaded.

    In addition,the method I provide is limited to the front page loading completion event, which is invalid for the back-end loading event.

    For more detailed code, please refer to the following code:

    <script>
            //Custom loading Html content displayed before the page is loaded
            var _LoadingHtml = document.getElementById('loadingDiv');
            //Presenting the loading effect
            document.write(_LoadingHtml);
            //Listen for load state changes
            document.onreadystatechange = completeLoading;
            //Remove loading effect when loading state is complete
            function completeLoading() {
                if (document.readyState == "complete") {
                    var loadingMask = document.getElementById('loadingDiv');
                    loadingMask.parentNode.removeChild(loadingMask);
                }
            }
        </script>
        <style type="text/css">
            html, body {
                width: 100%;
                height: 100%;
                margin: 0px;
                padding: 0px;
            }
    
            #loadingDiv {
                width: 100%;
                height: 100%;
                ;
                left: 0;
                width: 100%;
                top: 0;
                background: gray;
                opacity: 0.8;
                z-index: 10000;
                display: flex;
                justify-content: center;
                align-items: center;
            }
    
            #icon {
                ;
                margin: 0 auto;
                cursor: wait;
                width: auto;
                height: 57px;
                line-height: 57px;
                padding-left: 50px;
                padding-right: 50px;
                background: #fff no-repeat scroll 5px 10px;
                border: 2px solid #95B8E7;
                color: black;
            }
        </style> 
    
    <body>
            <div id="loadingDiv">
                <div id="icon">Loading...</div>
            </div>      
    </body> 

    Best Regards,

    YongQing.

    Tuesday, May 21, 2019 10:10 AM
  • User-418973555 posted

    i think it is still rendering partially after the loadingdiv disappeared, (slightly show both asynchronously)

    mostly when a html5 page full content load (with lots of scrolling down heavy contents), the preloader stays awhile then the page is really fully loaded

    for example : 

    .preloader {
            ;
      
              height:100%;
              width:100%;
            
             top: 50%;
              left: 50%;
             
              transform: translate(-50%, -50%);
            background-image: url(images/ajax_loader01.gif);
            background-repeat: no-repeat;
            background-;
            margin: auto 0;
            }
    
            #divbgimg {
                background-image: url('images/anchor-954927_1920.jpg');
                  ;
                  height: 100%; 
                  width: 100%;
                  /*margin-bottom: 1000px;*/
                  
                  background-;
                  background-repeat: no-repeat;
                  /*background-size: cover;*/
                 
            }
    
            #divcontent {
                background-image: url('images/ahlbeck-1542566_1920.jpg');
                padding-top:118%;
                
                height: 100%;
                width: 100%;
                position : absolute;
                 background-;
                  background-repeat: no-repeat;
                  
            }
    
            #wrapper
            {
                width:100%;
                height:100%;
                overflow-y:auto;
                
               
            }
    
            .scale-down-hor-left {
                ;
    	    height:100%;
                width: 100%;
                background-color:red;
    	    animation: scale-down-hor-left 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
            }
    
            @keyframes scale-down-hor-left {
              0% {
                        transform: scaleX(1);
                        transform-origin: 0% 0%;
              }
              100% {
                        transform: scaleX(0.3);
                        transform-origin: 0% 0%;
              }
            }
    
    
        </style>
    
    </head>
      
                  <body>
                      <div class="preloader"> 
    <div id="wrapper">

    <div id="divbgimg"></div>

    <div id="divcontent"></div>
    <div class="scale-down-hor-left"></div>
    </div>
    </div> </body>

    the scale-down-hor-left sliding div class will loaded up first (before preloader disappeared and others div shown up)

    also strange that the getelementbyclassname does not remove class

     var _LoadingHtml = document.getElementsByClassName('preloader');
            //Presenting the loading effect
           // document.write(_LoadingHtml);
            //Listen for load state changes
            document.onreadystatechange = completeLoading;
            //Remove loading effect when loading state is complete
            function completeLoading() {
                if (document.readyState == "complete") {
                    var loadingMask = document.getElementsByClassName('preloader');
                    //loadingMask.parentNode.removeChild(loadingMask);
                    loadingMask.classList.remove();
                    
                }
            }

    Thursday, May 23, 2019 2:03 AM
  • User665608656 posted

    Hi larnvok,

    According to your description, I put two larger pictures on the page to test the case.

    To make loading disappear after the image is all loaded, we need to determine the loading status of the image to confirm whether we need to hide loading div.

    Because IE browsers is different from other browsers in judging the loading status of images, we need to first identify the type of current browsers.

    Then, in the page loading event, we get all the pictures that need to be loaded on the current page, and give each picture a custom ID and a url in the data attribute through a loop. 

    In the Imagess method, we judge the type of the current browser to assign the src of the picture. After assigning, we judge whether the current loading state has been completed in the callback event of the method.

    In addition, I defined a loadCount variable to accept several images loaded, and added a timer per second to determine whether the current loadCount is equal to the number of all images on the current page. When they are equal, that is, when all images are loaded, cancel the timer, and remove or hide the loading div.

    For more detailed code, please refer to the following code:

    <script>  
        //Judging Browsers
        var Browser = new Object();
        Browser.userAgent = window.navigator.userAgent.toLowerCase();
        Browser.ie = /msie/.test(Browser.userAgent);
        Browser.Moz = /gecko/.test(Browser.userAgent);
    
        var loadCount = 0;
    
        //Determine whether the current image is loaded or not
        function Imagess(url, imgid, callback) {
            var val = url;
            var img = new Image();
            if (Browser.ie) {
                img.onreadystatechange = function () {
                    if (img.readyState == "complete" || img.readyState == "loaded") {
                        callback(img, imgid);
                        loadCount++;
                    }
                }
            } else if (Browser.Moz) {
                img.onload = function () {
                    if (img.complete == true) {
                        callback(img, imgid);
                        loadCount++;
                    }
                }
            }
           
           img.src = val;
        }
    
        //show pictures  
        function checkimg(obj, imgid) {
            document.getElementById(imgid).style.cssText = "";
            document.getElementById(imgid).src = obj.src;
        }
    
        //Initialize the image to be displayed and specify the location to be displayed
        window.onload = function () {
            var imglist = document.getElementById("imagelist").getElementsByTagName('img');
            for (i = 0; i < imglist.length; i++) {
                imglist[i].id = "img0" + i;
                Imagess(imglist[i].getAttribute("data"), imglist[i].id, checkimg);
            }
    
           //Use a timer to determine whether the current image is loaded completely
            var x = setInterval(function () {
                if (loadCount == imglist.length) {
                //When all images are loaded, delete loading div
                    var loadingMask = document.getElementById('loadingDiv');
                    loadingMask.parentNode.removeChild(loadingMask);
                    clearInterval(x);
                }
            }, 1000);
    
    
        }  
    </script>
    <body>
            <div id="loadingDiv">
                <div id="icon">Loading...</div>
            </div>
            <div id="imagelist">
                <img data="../Images/NASA.png" />
                <img data="../Images/10812677_033641283191_2.jpg" />
            </div>
    </body>

    Best Regards,

    YongQing.

    Thursday, May 23, 2019 10:10 AM
  • User-418973555 posted

    okay,, but is there a way to determine if the content inside each divs are fully loaded, eg. Bg img in a div

      var loadCount = 0;
    
            window.addEventListener("DOMContentLoaded", () => {
                loadCount++;
                    
            });
    
            window.addEventListener("load", () => {
                loadCount++;
                     
            });
    
            if (loadCount > 1) {
    
                document.getElementById("preloader").style.display = "none";
            }

    tried the above to load both dom&bg image, when ready, then disappear preloader, but could not 

     var interval = setInterval(function() {
                    if(document.readyState === 'complete') {
                        clearInterval(interval);
                        done();
                    }    
                }, 0);
    
            function done() {
                 
                document.getElementById("preloader").style.display = "none";
                document.getElementById("menutitle").style.display = 'none';
                 var boxOne = document.getElementsByClassName('startingmenu')[0];
                 boxOne.classList.add('scalesliding');
    
                boxOne.addEventListener("animationend", AnimationListener, false);
    
    
    
            }

    think the above help when document.readystate is completed, then only play animation by adding animation subclass to class 

    Thursday, May 23, 2019 10:39 AM
  • User665608656 posted

    Hi larnvok,

    To determine whether all content on the page has been loaded, you could only use the window.onload = function () {} event to hide loading div after page loading is completed.

    A Windows load event fires when all the content on your page is fully loaded including the DOM (document object model) content and asynchronous JavaScript, frames and images

    For more information, you could refer to this link: 
     
    https://forums.asp.net/t/2122948.aspx?difference+between+window+onload+function+and+function+pageLoad+

    You could also refer to the codes as below:

    <script>  
        window.onload = function () {
            var loadingMask = document.getElementById('loadingDiv');
            loadingMask.parentNode.removeChild(loadingMask);
        }
    </script>

    Best Regards,

    YongQing.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, May 24, 2019 8:21 AM