javascript图片延迟加载的思路

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
#div1{
height: 200px;
background: green;
font-size: 36px;
font-weight: bold;
}
</style>
</head>
<body style="height: 3500px;">
<h1>图片延迟加载的最基本原理</h1>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<div id="div1">我是图片默认文字</div>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<script>
function offset(ele){
var l=ele.offsetLeft;
var t=ele.offsetTop;
var p=ele.offsetParent;
while(p){
if(window.navigator.userAgent.indexOf("MSIE 8")>-1){
l+= p.offsetLeft;
t+= p.offsetTop;
}else{
l+= p.offsetLeft+ p.clientLeft;
t+= p.offsetTop+ p.clientTop;
}
p= p.offsetParent;
}
return {left:l,top:t};
}
var ele=document.getElementById("div1");
var h=offset(ele).top+ele.offsetHeight;//这个是元素文档的底边距离文档顶部的绝对偏移量;
window.onscroll=function(){
var winBottom=(document.documentElement.scrollTop||document.body.scrollTop)+(document.documentElement.clientHeight||document.body.clientHeight);
if(winBottom>h){
ele.innerHTML="我现在已经进入到你的视野中了!"
}
}
</script>
</body>
</html>

············