JavaScript Imitation Taobao page image scrolling load and refresh back to the top of the method to resolve _javascript skills

Taobao Photo Processing discussion
Taobao is a big page, but it's very fast to open. The image processing is to use a rolling load, that is, where the scroll axis roll, where the picture is loaded. But you want to see his source code, it costs Dickens, because they code compression merge do very well! Because the picture is loaded by scrolling, when initializing the picture does not load, then when you refresh the page at the bottom of the page, the bottom page usually does not load out, Taobao's practice seems to be (because I did not see their source code, just by operation), refresh let the page back to the top.

Imitation Taobao, do scrolling picture loading
Here are three ways of thinking:
1.javascript load of visual area of lazy load

<! DOCTYPE html>  

Look at my two console output, Console.log (IMGOBJ[I].SRC), get the entire browser address!
2.jquery load of visual area of lazy load
the above JS with jquery translation version!

var l=0
//js Method translation
$ (window). Bind ("scroll", function (event) {for

        (var i=l;i<$ ("img"). length;i++) {
          if ($ ("img"). EQ (i), offset (). Top < parseint ($ (window). Height ()) + parseint ($ (window). scrolltop ())) {
            if ($ ("img"). EQ (i). attr ("src") = = "") {
              var lazyloadsrc=$ (' img '). EQ (i). attr ("Haoroomslazyload");
              $ ("img"). EQ (i). attr ("src", lazyloadsrc);
            }
          if ($ ("img"). EQ (i), offset (). Top > parseint ($ (window). Height ()) + parseint ($ (window). scrolltop ())) {
            l=i;
            break;
          }}}

 );

3. Visual area Loading extension
For example, an animation effect, or a canvas image, I want to achieve the effect is that the initial come in do not load, when scrolling to the animation or the graph above, to load, then we can according to the above code to do the following improvements:

 $ (window). Bind ("scroll", function (event) {//window height + invisible Top height = low-screen height = high-level var from top 
      Thisbuttomtop = parseint ($ (window). Height ()) + parseint ($ (window). scrolltop ()); var thistop = parseint ($ (window). scrolltop ()); 
         The top of the screen is at the top of the height var picturetop = parseint ("Your ID to scroll to load"). Offset (). top); if (picturetop >= thistop && picturetop <= thisbuttomtop) {//$ ("#你的要滚动加载的ID"). attr ("src", $ ("#你的要 

          Scrolling loaded ID "). attr (" Haoroomslazyload "));



         Here you can execute your load function, the load function from the original Document.ready, move here! }
})

Refresh back to Top
when we do a visual area load, we usually let it flush back to the top. Like Taobao. Flush back to the top.
I don't know how Taobao does it. Flush back to the top, I'm using the onbeforeunload event.
onBeforeUnload and OnUnload events, onunload and onbeforeunload are all invoked at refresh or shutdown, and can be specified in the < script> script by window.onunload or in < specified in the body>. The difference is that onbeforeunload executes before onunload, and it can also prevent onunload from executing.
onBeforeUnload is also invoked when the page is refreshed or closed, onbeforeunload is about to go to the server to read the new page when the call is not started, and OnUnload has read from the server to load the new page, Called when the current page is about to be replaced. OnUnload is not able to prevent pages from being updated and closed. And onbeforeunload can do it.
1. When the page loads, only the onload is executed
2. The page closes first executes onbeforeunload, finally onunload
3. The page refreshes first executes onbeforeunload, then onunload, finally onload.
Refreshing back to the top is using this event that can be written.

Window.onbeforeunload  =  function () {$ (window). scrolltop (0);}

When the site all the pictures are used but area loading, CSS and JS are merged compressed, that our site speed and performance will be improved a lot!
If you want to do Taobao, you can improve the code.
In fact, the idea of delayed loading is to first put the picture in a data-src or a property, when the page sliding to the visual area, the saved picture address assigned to SRC can be.
I'm not going to list the code here.