javascript - How to achieve the effect that the subsequent content is not loaded at first, but as the mouse scrolls down, the subsequent content is gradually loaded?

Question

There is no content at the beginning, scroll down and the content at the back will gradually load in

Answer 1

Look, are they the special effects of Kappa’s Tmall flagship store’s new spring and summer products? https://kappa.tmall.com/view_...

This special effect is achieved through fixed, which is the method usually used by websites for advertising.

Answer 2

dropload event

Answer 3

Lazy loading solution, the main function is to reduce the load on the server
https://www.w3cways.com/1765....

Answer 4

I just saw your title and I thought it was drop-down loading. I usually use dropload to implement drop-down loading. Later, I saw what was written on the first floor and thought you might need js special effects.
Keeping the pull down and loading plus animation can be achieved using fullPage.js.

Answer 5

In fact, it is paging. You can refer to the following two:
jquery iscroll pull-up and drop-down loading content:
http://www.kuitao8.com/201501...
dropload.js:
https://github.com/ximan /drop...

Answer 6

I used the "load more" effect you mentioned on the order list page of the mall. I used the "stream loading" in Layui, and the effect was good.
demo: http://www.layui.com/demo/flo...
flow.load({

elem: '#LAY_demo2' //流加载容器
,isAuto: false    //是否自动加载更多
,isLazyimg: true  //图片懒加载
,done: function(page, next){ //加载下一页
  //模拟用ajax请求数据
  setTimeout(function(){
    var lis = [];
    for(var i = 0; i < 6; i++){
      lis.push('<li><img lay-src="http://s17.mogucdn.com/p2/161011/upload_279h87jbc9l0hkl54djjjh42dc7i1_800x480.jpg?v='+ ( (page-1)*6 + i + 1 ) +'"></li>')
    }
    next(lis.join(''), page < 6); //假设总页数为 6
  }, 500);
}

});