javascript懒加载之可视区域加载
在制作js可视区域加载之前，我们首先必须了解各种高度，我之前的一篇文章javascript的height总结，大家可以看一下，复习一下！
了解了各种高度之后，我们开始我们的js代码吧！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>haorooms前端博客-可视区域加载之 javascript</title>
<style>
img{width:100%;margin-bottom: 30px; min-height: 400px; background-color: #ddd;}
</style>
</head>
<body>
<img haoroomslazyload="Chrysanthemum.jpg" src="" >
<img haoroomslazyload="Desert.jpg" src="" >
<img haoroomslazyload="Hydrangeas.jpg" src="" >
<img haoroomslazyload="Koala.jpg" src="" >
<img haoroomslazyload="Lighthouse.jpg" src="" >
<img haoroomslazyload="Penguins.jpg" src="" >
<img haoroomslazyload="Tulips.jpg" src="" > <script>
var imgNum=document.getElementsByTagName('img').length;
var imgObj=document.getElementsByTagName("img");
var l=0;
window.onscroll=function(){
var seeHeight = document.documentElement.clientHeight;
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
for(var i=l;i<imgNum;i++){
if(imgObj[i].offsetTop < seeHeight + scrollTop){
console.log(imgObj[i].getAttribute("src"));
console.log(imgObj[i].src );
if(imgObj[i].getAttribute("src") == ""){
imgObj[i].src = imgObj[i].getAttribute("haoroomslazyload");
}
}
if(imgObj[i].offsetTop > seeHeight + scrollTop){
l=i;
break;
}
}
}
</script>大家注意看我的两个console输出，console.log(imgObj[i].src );获取的是整个浏览器地址！
jquery懒加载之可视区域加载
上面的js用jquery翻译版！
var l=0
//js方法翻译版
$(window).bind("scroll", function(event){
for(var i=l;i<$("img").length;i++){
if($("img").eq(i).offset().top < parseInt($(window).height()) + parseInt($(window).scrollTop())){
if($("img").eq(i).attr("src") == ""){
var lazyloadsrc=$('img').eq(i).attr("haoroomslazyload");
$("img").eq(i).attr("src",lazyloadsrc);
}
}
if($("img").eq(i).offset().top > parseInt($(window).height()) + parseInt($(window).scrollTop())){
l=i;
break;
}
}
});另外一种方法，可以参考我之前写的一个延迟加载的插件：http://www.haorooms.com/post/touchweb_canvas_lazyload
其中是这么写的。
我把这个写法拎了出来，如下：
$(window).bind("scroll", function(event){
$("img").each(function(){
//窗口的高度+看不见的顶部的高度=屏幕低部距离最顶部的高度
var thisButtomTop = parseInt($(window).height()) + parseInt($(window).scrollTop());
var thisTop = parseInt($(window).scrollTop()); //屏幕顶部距离最顶部的高度
var PictureTop = parseInt($(this).offset().top);
if (PictureTop >= thisTop && PictureTop <= thisButtomTop && $(this).attr("haoroomslazyload") != $(this).attr("src")) {
$(this).attr("src", $(this).attr("haoroomslazyload"));
}
});
})可视区域加载延伸
例如一个动画效果，或者一个canvas图片，我想达到的效果是，初始进来不加载，当滚动到这个动画或者图表上面的时候，进行加载，那么我们就可以根据上面的代码进行如下改进：
$(window).bind("scroll", function(event){
//窗口的高度+看不见的顶部的高度=屏幕低部距离最顶部的高度
var thisButtomTop = parseInt($(window).height()) + parseInt($(window).scrollTop());
var thisTop = parseInt($(window).scrollTop()); //屏幕顶部距离最顶部的高度
var PictureTop = parseInt($("你的要滚动加载的ID").offset().top);
if (PictureTop >= thisTop && PictureTop <= thisButtomTop) {
// $("#你的要滚动加载的ID").attr("src", $("#你的要滚动加载的ID").attr("haoroomslazyload"));
//此处可以执行你的加载函数，加载函数由原来的document.ready中，移到这里来！
}
})js方案-可视区域判断
function getElementTop(element){
var actualTop = element.offsetTop;
var current = element.offsetParent;
while (current !== null){
actualTop += current. offsetTop;
current = current.offsetParent;
}
return actualTop;
}
function isInViewPortOfOne (el) {
// viewPortHeight 兼容所有浏览器写法
const viewPortHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight
const offsetTop = el.offsetTop // 有相对定位，不准，可以用如 getElementTop(el)
const scrollTop = document.documentElement.scrollTop
const top = offsetTop - scrollTop
console.log('top', top)
return top <= viewPortHeight
}补充
可视区域加载可以用javascript新的属性getBoundingClientRect()制作，简单很多。关于getBoundingClientRect的API请看
https://developer.mozilla.org/zh-CN/docs/Web/API/Element/getBoundingClientRect
getBoundingClientRect 可视区域 代码如下：
function isInViewPortOfTwo (el) {
const viewPortHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight
const top = el.getBoundingClientRect() && el.getBoundingClientRect().top
console.log('top', top)
return top <= viewPortHeight
}