作为一个手残的外行前端 coder，今天因为需要，研究了下瀑布延时加载和图片的懒加载，做个总结，免得以后忘记了！
瀑布流最近做了一个图片网站，采用的是瀑布流的布局效果，大致如下：
看起来效果还不错，但是问题却来了，首页这里，每次 loading 都会一次性加载200+图片，我的天啊。如果赶上网速不好的时候，会导致其他网页也无法打开。这个真实没法忍，于是我准备优化一下。
很容易，我自然而然的就想到了采用下拉的形式，每次加载一部分数据，那么说干就干。
改造后台最开始，我的后台代码是一次性把所有数据都返回给前端，现在把数据分成4分，首次进入首页时，只返回第一份
@app.route('/', methods=['GET', 'POST'])
def index():
db = get_db()
cur = db.execute('select name, nvshen_id from nvshen order by id desc')
nvshen = [dict(name=row[0], nvshen_id=row[1]) for row in cur.fetchall()]
seg = int(len(nvshen)/4)
data = []
socre = 1
for n in nvshen[:seg]:
tmp_data = []
pic = db.execute('select pic_url from picture where nvshen_id = (?)', [n['nvshen_id']])
pic_list = [row[0] for row in pic.fetchall()]
pic_url = random.choice(pic_list)
tmp_data.append(n['name'])
tmp_data.append(pic_url)
tmp_data.append(n['nvshen_id'])
data.append(tmp_data)
return render_template('index.html', data=data, score=socre)
然后再写一个获取数据的接口，参数就是 page
@app.route('/api/getdata/', methods=['POST'])
def get_data(page):
db = get_db()
cur = db.execute('select name, nvshen_id from nvshen order by id desc')
nvshen = [dict(name=row[0], nvshen_id=row[1]) for row in cur.fetchall()]
seg = 0
seg_page = int(len(nvshen)/4)
end = False
if page == 2:
seg = seg_page
seg_page = seg*2
elif page == 3:
seg = seg_page*2
seg_page = seg*3
elif page == 4:
seg = seg_page*3
seg_page = int(len(nvshen)) + 1
end = True
elif page == 1:
pass
else:
return jsonify({"msg": "error page id", "code": 422}), 422
data = []
socre = 1
for n in nvshen[seg:seg_page]:
tmp_data = []
pic = db.execute('select pic_url from picture where nvshen_id = (?)', [n['nvshen_id']])
pic_list = [row[0] for row in pic.fetchall()]
pic_url = random.choice(pic_list)
tmp_data.append(n['name'])
tmp_data.append(pic_url)
tmp_data.append(n['nvshen_id'])
data.append(tmp_data)
print("getdata: ", data)
return jsonify({"msg": data, "code": 200, "end": end}), 200
改造前端因为当前只是把数据分成4分，所以当 page 为4的时候，就把停止信号 end 设置为 True，这样前端判断这个信号就可以判断什么时候停止请求数据了。
先写一个用户获取数据的函数
function getData(page) {
var xhr = new XMLHttpRequest();
xhr.responseType = "json";
xhr.open('POST', '/api/getdata/' + page, true);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.onload = function (ev) {
if(this.status === 200) {
//console.log(this.response);
if(this.response['end'] === true) {
//console.log("end is true");
flag = false;
};
var mydata = this.response['msg'];
for(var i=0, len=mydata.length; i' +
'' +
''.replace("URL", Flask.url_for("nvshen", {id: myid})) +
myname + '' +
'' +
'' +
'' +
'{% if score == 1 %}' +
'' +
'{% elif score == 2 %}' +
'' +
'{% elif score == 3 %}' +
'' +
'{% elif score == 4 %}' +
'' +
'{% elif score == 5 %}' +
'' +
'{% else %}' +
'' +
'{% endif %}' +
'' +
'
' +
'';
var script = '';
$('#gallery-wrapper').append(htmlText);
$('body').append(script);
}
//console.log("add new html finish");
}
};
xhr.send();
}
主要还是拼接字符串，然后把获取到的数据塞进字符串中。
flask_jsglue
这里不得不提一下 flask 的一个插件 --flask_jsglue
对于在 Javascript 中使用 url_for 函数真的是太好用了，感兴趣的同学可以自行去看看，非常的简单好用。
然后就是下拉的逻辑了
var totalHeight = $(document).height(); //整个文档高度
var scrollTop = $(window).scrollTop();//浏览器可视窗口顶端距离网页顶端的高度（垂直偏移）
var p = 2;
var flag = true;
$(window).scroll(function () {
scrollTop = $(window).scrollTop();
console.log("totalHeight-scrollTop-$(this).height()", totalHeight-scrollTop-$(this).height());
totalHeight = $(document).height();
if(flag){
if(totalHeight-scrollTop-$(this).height()<0.5){
//console.log("add new html");
getData(p);
p ++;
}
}
});
图片懒加载因为我们再进入首页的时候，已经返回了数据的第一部分，所以这里的 page 就从2开始取值；然后当整个文档的高度减去垂直偏移量，再减去浏览器可是窗口的高度小于0.5时，则调用拉取数据的函数，并且 p 自加1.
对于图片懒加载，就比较简单了，有现成的组件库可以使用。
首先引入类库
然后修改 img 元素的图片地址属性
![]()
我们一般会把图片地址赋值给 src，现在我们赋值给 data-src。
最后，在页面全局写一个函数
$(function(){
$("img.thumb").lazyload();
});
这样，就能保证图片只要当页面滚动到它的位置时才加载了。
最后再提供下网站地址，供大家参考
https://nvshen.luobodazahui.top
