懒加载应该是现在网站提高性能常用的的方法之一,小白们可能会想,嗯,我知道,或者我看过,就是动手操作少,没错我就是这样的小白,在网上看过千遍万遍不如动手操练一遍,所以在我操练之后大概来个小总结,哈哈哈见笑了(有错误希望大家及时指出)
首先先说说懒加载和预先加载的区别哈
懒加载:就是需要数据的的时候在加载,不用的时候我不加载
预加载:就是提前把 数据加载好
拿图片懒加载为例哈:
第一步:首先你需要获取所有img标签
var aImg = document.querySelectorAll('img');
第二步:获取地理位置信息
var scrollT = $(window).scrollTop();
var winH = $(window).height();
如果当前图片到文档顶部的距离当前浏览器的高度+滚动条距离顶部的距离,我们就加载图片
说到加载图片我们首先把图片的地址存在data-src中,加载的时候把data-src的属性赋值给src
if (aImg[i].offsetTop < scrollT + winH) {
aImg[i].src = aImg[i].getAttribute('data-src');
}复制代码
那就是这样
function loadImg() {
var scrollT = $(window).scrollTop();
var winH = $(window).height();
var aImg = document.querySelectorAll('img');
var len = aImg.length;
for (var i = 0; i < len; i++) {
if (aImg[i].offsetTop < scrollT + winH) {
aImg[i].src = aImg[i].getAttribute('data-src');
}
}
}复制代码
如果想实现下拉,加载接口下一页的数据,可以下面的方法实现
var URL = 'moubao.com/goods?page=…'
题外:下拉加载下一页的数据
function loadPage() { var n = 0; var len = vm.array.length; var pageH = $(document.body).height(); var scrollT = $(window).scrollTop(); var winH = $(window).height(); var aa = (pageH - winH - scrollT) / winH; if (aa < 0.5) { getData(i); } flag = false; } 注:getData()函数 function getData(pagenumber){ i++ $.ajax({ type: 'get', url: URL, data: { page: pagenumber, size: gPageSize }, dataType: 'json', success: function(ajaxData) { console.log(ajaxData); }, }); }复制代码
不过在调用loadImg()的时候,别直接写loading(),放在例如
$('window').scroll(functin(){
loagImg();
loadPage();
});
因为,两个函数都要实时获取到$(document.body).height();
$(window).scrollTop();
$(window).height();
的值
所以大概这样吧,我在做公司的新人项目,就把其中的一些东西做一些小的总结,如果有写的不好的地方,欢迎大家指出……^_^