locked
Asynchronous loading HTML page RRS feed

  • Question

  • User1519114738 posted

    Hi All,

    I have  a static html page, it contains a lot of images, links and text, so it takes a lot of time to load this page when we want to visit it. I think we can load this page Asynchronous. When user visits this page, it will only load parts of the same size as the window. When user pulls down the scroll bar, it will then load the rest part. How can I reach it? I need your help. 

    Thanks for advance.

    Best Regards,

    Churry

    Tuesday, June 26, 2018 2:23 AM

Answers

  • User-369506445 posted

    hi

    here are many ways to do it.

    **Cache reused content (this is an important note for load faster)

    Make sure that any content that can be cached, is cached, and with appropriate expiration times.

    Specify sizes for images and tables

    If the browser can immediately determine the height and/or width of your images and tables, it will be able to display a web page without having to reflow the content. This not only speeds the display of the page but prevents annoying changes in a page's layout when the page completes loading. For this reason, heightand shouldwidth be specified for images, whenever possible.

    Reduce page weight

    Page weight is by far the most important factor in page-load performance.

    Reducing page weight through the elimination of unnecessary whitespace and comments, commonly known as minimization, and by moving inline script and CSS into external files, can improve download performance with minimal need for other changes in the page structure.

    Minimize the number of files

    Reducing the number of files referenced in a web page lowers the number of HTTP connections required to download a page, thereby reducing the time for these requests to be sent, and for their responses to be received.

    Reduce the number of inline scripts

    Inline scripts can be expensive for page loading since the parser must assume that an inline script could modify the page structure while parsing is in progress. Reducing the use of inline scripts in general, and reducing the use of todocument.write() output content in particular, can improve overall page loading. Use modern AJAX methods to manipulate page content for modern browsers, rather than the older approaches based on document.write().#

    Use Div instead of Table

    When a web browser displays a table, it looks for the opening <table> tag and closing </table>tag. Nothing will be rendered on the screen until the browser finds the closing </table> tag. As a result, if you put all your web content into a big table, no matter how many tables you have inside that big table, users will not be able to see anything displayed until browser reads all the way to that big table's </table> tag.

    Therefore, we should avoid putting your entire page content into one big table. Here the entire page content typically includes page header such as banners, navigation menus, main content, and page footer such as copy right, company info, etc.

    also, you can use Ajax for load rest of your page when the scroll is down

    http://www.dotnetcurry.com/aspnet/911/infinite-scroll-aspnet-webapi-knockoutjs

    https://dotnetthoughts.net/load-data-while-scrolling-page-down-with-jquery-and-asp-net-mvc/

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, June 26, 2018 4:46 AM
  • User283571144 posted

    Hi ChurryCome,

    When user pulls down the scroll bar, it will then load the rest part. How can I reach it? I need your help. 

    According to your description, I suggest you could consider using jquery to help you achieve your requirement.

    You could use scroll method to monitor the scorll, if the scroll go to the bottom, you could use ajax to load the another page's content.

    More details, you could refer to below codes:

    Html

    !DOCTYPE html>
    <html ng-app="plunker">
    
      <head>
        <meta charset="utf-8" />
        <title>AngularJS Plunker</title>
        <script>document.write('<base href="' + document.location + '" />');</script>
        <link rel="stylesheet" href="style.css" />
        <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
        <script data-require="angular.js@1.4.x" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.6/angular.min.js" data-semver="1.4.6"></script>
        <script src="autoNumeric.js"></script>
        <script src="app.js"></script>
        <script src="myTest.js"></script>
      </head>
    
      <body ng-controller="MainCtrl">
        <div>
          <strong>Input Field: </strong>
          <input type="text" ng-model="currency" angular-currency="options" variable-options="true" />
        </div>
        <div name="myForm" ng-form>
          My field: 
           <input type="text" class="numeric" data-ng-model="myTest" ng-keypress="enableDisableButton(myForm)" required />
           <div>
              <input type="button" value="Add test"   ng-disabled="myBtn" />
                    <span ng-bind="myBtn"></span>
    
           </div>
        </div>
        <div>
          <strong>Angular Data: </strong>
          <span ng-bind="currency"></span>
          <div>
            My test:  <span ng-bind="myTest"></span>
          </div>
         
        </div>
        <hr />
        <button ng-click="newOptions()">Change Options</button>
      </body>
    
    </html>
    

    Script.js:

    $(function () {
     
      $(window).scroll(function() {
        if($(window).scrollTop() == $(document).height() - $(window).height()) {
             $.ajax({url:"myPage2.html",success:function(result){
          $("body").append(result);
        }});
        }
    });
     });

    Mypage2.html:

    <h2>New content in here!</h2>

    Result:

    Best Regards,

    Brando

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, June 27, 2018 7:20 AM
  • User-474980206 posted

    google javascript lazy image loaders for your favorite library

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, June 28, 2018 3:22 PM

All replies

  • User-369506445 posted

    hi

    here are many ways to do it.

    **Cache reused content (this is an important note for load faster)

    Make sure that any content that can be cached, is cached, and with appropriate expiration times.

    Specify sizes for images and tables

    If the browser can immediately determine the height and/or width of your images and tables, it will be able to display a web page without having to reflow the content. This not only speeds the display of the page but prevents annoying changes in a page's layout when the page completes loading. For this reason, heightand shouldwidth be specified for images, whenever possible.

    Reduce page weight

    Page weight is by far the most important factor in page-load performance.

    Reducing page weight through the elimination of unnecessary whitespace and comments, commonly known as minimization, and by moving inline script and CSS into external files, can improve download performance with minimal need for other changes in the page structure.

    Minimize the number of files

    Reducing the number of files referenced in a web page lowers the number of HTTP connections required to download a page, thereby reducing the time for these requests to be sent, and for their responses to be received.

    Reduce the number of inline scripts

    Inline scripts can be expensive for page loading since the parser must assume that an inline script could modify the page structure while parsing is in progress. Reducing the use of inline scripts in general, and reducing the use of todocument.write() output content in particular, can improve overall page loading. Use modern AJAX methods to manipulate page content for modern browsers, rather than the older approaches based on document.write().#

    Use Div instead of Table

    When a web browser displays a table, it looks for the opening <table> tag and closing </table>tag. Nothing will be rendered on the screen until the browser finds the closing </table> tag. As a result, if you put all your web content into a big table, no matter how many tables you have inside that big table, users will not be able to see anything displayed until browser reads all the way to that big table's </table> tag.

    Therefore, we should avoid putting your entire page content into one big table. Here the entire page content typically includes page header such as banners, navigation menus, main content, and page footer such as copy right, company info, etc.

    also, you can use Ajax for load rest of your page when the scroll is down

    http://www.dotnetcurry.com/aspnet/911/infinite-scroll-aspnet-webapi-knockoutjs

    https://dotnetthoughts.net/load-data-while-scrolling-page-down-with-jquery-and-asp-net-mvc/

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, June 26, 2018 4:46 AM
  • User283571144 posted

    Hi ChurryCome,

    When user pulls down the scroll bar, it will then load the rest part. How can I reach it? I need your help. 

    According to your description, I suggest you could consider using jquery to help you achieve your requirement.

    You could use scroll method to monitor the scorll, if the scroll go to the bottom, you could use ajax to load the another page's content.

    More details, you could refer to below codes:

    Html

    !DOCTYPE html>
    <html ng-app="plunker">
    
      <head>
        <meta charset="utf-8" />
        <title>AngularJS Plunker</title>
        <script>document.write('<base href="' + document.location + '" />');</script>
        <link rel="stylesheet" href="style.css" />
        <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
        <script data-require="angular.js@1.4.x" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.6/angular.min.js" data-semver="1.4.6"></script>
        <script src="autoNumeric.js"></script>
        <script src="app.js"></script>
        <script src="myTest.js"></script>
      </head>
    
      <body ng-controller="MainCtrl">
        <div>
          <strong>Input Field: </strong>
          <input type="text" ng-model="currency" angular-currency="options" variable-options="true" />
        </div>
        <div name="myForm" ng-form>
          My field: 
           <input type="text" class="numeric" data-ng-model="myTest" ng-keypress="enableDisableButton(myForm)" required />
           <div>
              <input type="button" value="Add test"   ng-disabled="myBtn" />
                    <span ng-bind="myBtn"></span>
    
           </div>
        </div>
        <div>
          <strong>Angular Data: </strong>
          <span ng-bind="currency"></span>
          <div>
            My test:  <span ng-bind="myTest"></span>
          </div>
         
        </div>
        <hr />
        <button ng-click="newOptions()">Change Options</button>
      </body>
    
    </html>
    

    Script.js:

    $(function () {
     
      $(window).scroll(function() {
        if($(window).scrollTop() == $(document).height() - $(window).height()) {
             $.ajax({url:"myPage2.html",success:function(result){
          $("body").append(result);
        }});
        }
    });
     });

    Mypage2.html:

    <h2>New content in here!</h2>

    Result:

    Best Regards,

    Brando

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, June 27, 2018 7:20 AM
  • User-474980206 posted

    google javascript lazy image loaders for your favorite library

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, June 28, 2018 3:22 PM