首页 > 代码库 > 按需加载的第一次尝试
按需加载的第一次尝试
<!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，呵呵
按需加载的第一次尝试
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。