About this effect is very simple, Style section I will not say more, I simply wrote about the layout,
This is the css style
Let's talk about the realization of the principle.
We all know that the introduction of the picture, we are used to introduce src picture address. In order to achieve the picture display. Then we let him start without loading the address of src, the address of the src attribute in a (custom attributes, the new features of HTML5) custom;
So that we can address are placed in a custom attribute, when we need to, put in src.
That is how lazy loading to load? Begin loading several pieces of information, when we read over and then loaded.
In the mobile terminal, when the slider is in the end, we trigger the request to have his request for more pictures, in the pc end there is a paging effect, in fact, the principle is similar;
When the distance from the top of the slider by the page height greater than a height equal to the total time, to explain to the very bottom;
(Say incomplete, too one-sided, correct me hope Gangster message);
The next step is to write a ajax request, is the most basic style.
Inside the data-original is my custom attributes, save the image address;
src put a loading animation when the address is not yet loaded up picture displayed
(I address this request is to build a local data I do not know if you can see what I wrote about another json:. Build a blog server)
Our next step is to download the plug-lazyload of the jquery plugins (Download: http://www.jq22.com/jquery-info390 )
Then we introduce it
In this way we will be the information we requested on the page. And displayed.
We can also add a fade effect in the following
Then we write the ajax request in a function where;
In the subsequent slide the slider is to determine whether the lowest part.
Both of which I have written at my function named. The first request is a start trigger, and second, when the slider is slid to the bottom trigger request.
The reason to start calling request Yes. I wrote a segmented, so he began to load only five
This completes all. Write a bit messy to see when stroked a stroke of look. Hey!