63 lines
2.0 KiB
JavaScript
63 lines
2.0 KiB
JavaScript
|
// onload是等所有的资源文件加载完毕以后再绑定事件
|
|||
|
|
window.onload = function () {
|
|||
|
|
|
|||
|
|
//// 获取图片列表，即img标签列表
|
|||
|
|
var imgs = document.querySelectorAll('img');
|
|||
|
|
function getTop(e) {
|
|||
|
|
return e.offsetTop;
|
|||
|
|
}
|
|||
|
|
// 懒加载实现
|
|||
|
|
function lazyload(imgs) {
|
|||
|
|
imgs = document.querySelectorAll('img');
|
|||
|
|
for (let i of imgs) {
|
|||
|
|
if ($(i).is(':visible') == true) {
|
|||
|
|
let trueSrc = i.getAttribute("data-src");
|
|||
|
|
|
|||
|
|
if (trueSrc != 'null' && trueSrc != null && trueSrc.indexOf('{{') < 0 && trueSrc.indexOf('}}') < 0) {
|
|||
|
|
$(i).removeAttr("data-src")
|
|||
|
|
//$.ajax({
|
|||
|
|
// timeout: 2000,
|
|||
|
|
// url: trueSrc,
|
|||
|
|
// type: "get",
|
|||
|
|
// success: function (data) {
|
|||
|
|
// i.setAttribute("src", data);
|
|||
|
|
// }
|
|||
|
|
//})
|
|||
|
|
}
|
|||
|
|
//if (trueSrc != 'null' && trueSrc != null && trueSrc.indexOf('{{') < 0 && trueSrc.indexOf('}}') < 0) {
|
|||
|
|
// $(i).removeAttr("data-src")
|
|||
|
|
// i.setAttribute("src", trueSrc);
|
|||
|
|
//}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
return;
|
|||
|
|
|
|||
|
|
|
|||
|
|
// 可视区域高度
|
|||
|
|
var h = window.innerHeight;
|
|||
|
|
//滚动区域高度
|
|||
|
|
var s = document.documentElement.scrollTop || document.body.scrollTop;
|
|||
|
|
for (let i of imgs) {
|
|||
|
|
//图片距离顶部的距离大于可视区域和滚动区域之和时懒加载
|
|||
|
|
//计算方式和第一种方式不同
|
|||
|
|
if (i.getBoundingClientRect().top < window.innerHeight) {
|
|||
|
|
let trueSrc = i.getAttribute("data-src");
|
|||
|
|
if (trueSrc != 'null' && trueSrc != null && trueSrc.indexOf('{{') < 0 && trueSrc.indexOf('}}') < 0) {
|
|||
|
|
$(i).removeAttr("data-src")
|
|||
|
|
i.setAttribute("src", trueSrc);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
setTimeout(lazyload(imgs), 20);
|
|||
|
|
|
|||
|
|
// 滚屏函数
|
|||
|
|
window.onscroll = function () {
|
|||
|
|
//保证每次取到的为最新的
|
|||
|
|
lazyload(imgs);
|
|||
|
|
}
|
|||
|
|
}
|