<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>layImg</title>
<style>
*{ margin:0; padding:0;}
img{ display:block; width:200px; height:200px; background:#F6C}
</style>
</head>
<body>
<img _src="0.png" />
<img _src="1.png" />
<img _src="2.png" />
<img _src="3.png" />
<img _src="4.png" />
<img _src="5.png" />
<img _src="6.png" />
<img _src="7.png" />
<img _src="8.png" />
<img _src="9.png" />
<img _src="10.png" />
<img _src="11.png" />
</body>
</html>
<script type="text/javascript">
window.onload=function(){
var scrTop=document.documentElement.scrollTop||document.body.scrollTop;
var cHeight=document.documentElement.clientHeight;
var cha =cHeight+scrTop;
var aImg=document.getElementsByTagName("img");
for(var i=0;i<aImg.length;i++){
if(!aImg[i].getAttribute("src")){
if(aImg[i].offsetTop<=cha){
var src=aImg[i].getAttribute("_src");
aImg[i].setAttribute("src",src)
}
}
}
window.onscroll=function(){
var scrTop=document.documentElement.scrollTop||document.body.scrollTop;
var cha =cHeight+scrTop;
for(var i=0;i<aImg.length;i++){
if(!aImg[i].getAttribute("src")){
if(aImg[i].offsetTop<=cha){
var src=aImg[i].getAttribute("_src");
aImg[i].setAttribute("src",src)
}
}
}
}
}
</script>
原理很简单，滚动条的高度值和每一个没有src属性的图片的高度比较，但是这样一玩的话，图片的高度就得写死了，不然图片没有高度还求什么，其实还有bug的，例如，假如img在一个相对定位的div里面的话，它的offsetTop就是很小的，这样就会在不需求加载的时候加载了，这样问题其实是出在offsetTop上面的，明天写个方法，替换了它，名字就叫topToBody，呵呵
时间： 2024-10-12 05:48:14