JQuery-free refresh drop-down Load picture

Recently did a project needs to be done without refreshing the page drop-down Load picture, a lot of research, most of them are used to detect the scroll bar reaches the bottom, then use ajax to load the next page data to add data, according to this logic, write your own a specific code is as follows:

 

JQuery ajax wrote pull the trigger event

$ (window) .scroll ( function () {
             IF ($ (window) .scrollTop () == ($ (Document) .height () - $ (window) .height ())) // determines whether the right slider Slide lowermost 
            { 
                $ .ajax ({ 
                    URL: "", // background address 
                    dataType: "JSON" , 
                    Data: {}, // incidental parameters, together with the general end ID of a request or other indication 
                     ... ..., 
                    Success: function (data) { 
                            $ ( . "#Album") the append (data.result); // add data Album is the result returned by Div 

                    }  
                })
            }
        })

The basic principle of this process is as follows loaded when the page first loads of some pictures, slide the slider to the right until the bottom when the trigger event ajax, conduct background communication and, through the backstage requests are json data, which contains the required added to the content of the page, a layer of additional content for the original page by append (intermediate data may also involve issues that are read, if the background in order to facilitate direct deal with a bunch of html return statement added directly, but it can be extended small), in order to achieve this effect.

In the implementation process also found another problem: jq written scroll event likely to trigger several times that the mouse scroll trigger several times, for this situation, thinking the two solutions under the following main ideas:

1. Add a timer within 5-10 seconds to allow one-shot ()

2. Add a variable, it changes to false at the beginning of the implementation scroll only once before executing the change back to true, in order to ensure scroll Only one in execution.