頁面指定區域懶載入
阿新 • • 發佈：2019-01-23
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>前端部落格-可視區域載入之 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");
window.onscroll=function(){
var seeHeight = document.documentElement.clientHeight;
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
console.log(imgObj[3].offsetTop+" seeHeight"+seeHeight+" scrollTop"+scrollTop);
if(imgObj[3].offsetTop < seeHeight + scrollTop){
}
</script>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>前端部落格-可視區域載入之 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");
window.onscroll=function(){
var seeHeight = document.documentElement.clientHeight;
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
console.log(imgObj[3].offsetTop+" seeHeight"+seeHeight+" scrollTop"+scrollTop);
if(imgObj[3].offsetTop < seeHeight + scrollTop){
alert('444');
//ajax後臺載入業務處理
}}
</script>