World epidemic - lazy load optimization

Cause: Query epidemic deploy the project to my little disposable loading epidemic server line graph for each country is too slow (of course, this is not necessary, a waste of traffic), then search the Internet some lazy loading method.

Solution: Set scrolling window listening to events, if the window slide in the end to achieve a load.

. 1  var Clock; 
 2  var NUM = 0; // counter
 . 3      $ (window) .on ( 'Scroll', function () {
 . 4          IF (Clock) {
 . 5              the clearTimeout (Clock); // to avoid excessive slider
 6          }
 7          clock = setTimeout (function () { // 0.2 trigger delay
 . 8              NUM = Start (NUM);
 . 9          }, 200 is)
 10         
. 11      })

start function:

  function start (i) {// begin 
        if (i> = size) return i; // out of range determining whether 
        IF (isShow ()) {       
            loadCharts (I); 
            return I +. 1; 
        } 
        return I; 
     
    }

Determining whether the slide in the end of the function is as follows:

     function isShow () {// determines whether 
　　　　 var scrollTop = $ (window) .scrollTop (); // window relative to the top bar scroll offset 
        var scrollHeight = $ (document) .height (); // documentation height, i.e., the entire html page 
        var windowHeight = $ (window) .height (); // browser window height 
　　　　　/ 2 * plus here because the browser window offset amount with the height of the document and are not necessarily equal to a hundred percent , 
　　　　　may be the difference between a few tenths, if possible write directly equal to this function can not be achieved 
　　　　　* / 
　　　　　return (scrollTop windowHeight + 2 +> = scrollHeight) to true:? false; 
    }

 

Achieve results:

Initial interface:

 

Flip down:

 

 

 Project link:

Links: https://pan.baidu.com/s/1CDjj2oIFOhc0NHoeeq10EQ
extraction code: 1lce