<!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.οnscrοll=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.οnscrοll=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>
152
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
