懒加载-js-前端小进击

最近做的项目，页面列表页，大量需要懒加载的效果，这里做个总结，如有错的，欢迎交流~

啰嗦前言：

　　我们平时网页阅读一个列表页，常见的翻页就是在页底部有个页面跳转，其在点击页码的时候，实际就是去请求新页面的列表数据，再加载新页面。

　　懒加载的本质就是如此，页面阅读到底部，直接触发接口的新请求。
　　与翻页跳转的操作不同的是，懒加载，不能隔页跳转，页面保留全部请求结果，替代了翻页时页面头尾部等其他非列表数据的重新加载。

　　这里可以参考知乎首页 https://www.zhihu.com/ 的列表页，也是懒加载效果。

所以，懒加载的实现步骤就是酱紫的~

step1：html我们建一个div用来循环列表内容

step2：js填写模板，把要循环的html打个样

　　var template='<div class="list">模块[(id)[(name)]]</div>';

step3：创建一个数组，用来处理接口返回的数据（如json,字符串，数组等），在数据的key下放我们需要的字段

　　var data = [];
　　for(var i=0; i<dataJson.length;i++){
　　　　data.push({
　　　　　　id: dataJson[i],

　　　　　　name: dataJson[i].name
　　　　});
　　}
　　var html = render(data); //步骤4

step4：data键值,放到template里，这里写的这个方法，主要是做数据替换，根据key取值　

function render(data){
    var html = '';
    data.forEach(function(item,i){
        var temp = new String(template);
        $.each(item,function(k,v){
            var reg = new RegExp('\\[\\('+k+'\\)\\]','g'); temp = temp.replace(reg, v); }); html += temp; }) return html; }

step5：重点来了，从这里开始实现懒加载。之前的步骤就已经把一次接口请求的数据都渲染到html上了。

　　现在，我们再添加一个div，对这个div做滚轮监听，当它出现在页面时，就去触发新的接口请求，然后就去再去循环一次步骤2,3,4

html：　　　　　　　　　　

js:

window.onscroll = function() {
    if (isElementInViewport($('.loading-more')[0])) {
           loadData() //请求接口方法，
    }
};

//懒加载滚动监听
function isElementInViewport(el) {
    offset = 0;
    const box = el.getBoundingClientRect(), top = (box.top >= 0), left = (box.left >= 0), bottom = (box.bottom <= (window.innerHeight || document.documentElement.clientHeight) 　　　　　　　　　　+ offset), right = (box.right <= (window.innerWidth || document.documentElement.clientWidth) 　　　　　　　　　　+ offset); return (top && left && bottom && right); }

　tips. $('.loading-more')这里一定是要取$('.loading-more')[0]这样式的，原因我也不好不知道QAQ，非常欢迎大神来解惑。

step6：加载的小尾巴
　　剩下就是把接口请求和步骤3封装在一个方法里（譬如取个名字叫loadData），当页面初始化的时候，调用一次loadData();，当页面滚动触发了步骤5，就再调用一次loadData();

　　当然，也可以做成点击触发的效果，这里就只需要把步骤5换成点击事件就OK了

最后，为防止页面无限制持续请求接口加载的情况，还可以给一个保护机制，即滚轮触发的加载状态，例如长var lock = false; 这样的。当页面在步骤5时，lock = true,才开启加载，反之不加载

最后啰嗦一句，三元表达式可以良好的解决data在push时，返回同一key下的不同value

懒加载-js-前端小进击

猜你喜欢