我们在浏览淘宝京东等大型购物网页时会经常出现许多图片而图片需要花费我们非常多的流量问题。
我们在写网页的时候怎么解决这个问题呢?这时候就要用到我们图片懒加载的问题,这样不仅可以
解决流量问题,也提高了性能等等。
下面我们就来看一下图片的懒加载怎么问题。
Title
*{
margin: 0;
padding: 0;
list-style-type: none;
}
html,body{
width: 100%;
height: 100%;
}
#p p{
width: 400px;
height: 500px;
/*border:1px solid #000;*/
display: inline-block;
margin:10px;
}
img{
width: 100%;
height: 100%;
}
// 获取距离父级距离
function getPos(obj) {
var t=0;//先声明两个变量 用来存储距离上面的高度 距离左边的高度
var l=0;
while (obj){//循环判断这个元素是否存在,存在才执行这个方法
t+=obj.offsetTop; // 加上距离父级的距离
l+=obj.offsetLeft;
obj=obj.offsetParent;// 有父级让他变成他的父级
}
return {left:l,top:t}; //把值传出去
}
window.onload=window.onscroll=function () {//滚动的时候和页面加载时执行的一样
var aImg=document.getElementsByTagName('img');//获取所有的元素img元素
var oSCrollT=document.body.scrollTop || document.documentElement.scrollTop;// 滚动条滚动高度
var oClh=document.documentElement.clientHeight;//可视区的高度
var oScr=oSCrollT + oClh; // 滚动条高度 + 可视区的高度
for(var i=0;i
if(oScr > getPos(aImg[i]).top){
aImg[i].src=aImg[i].getAttribute('_src'); //给src属性赋值
}
}
}
TayCMS免费企业建站系统1.8 for PHP下载由于精力有限,程序更新比较慢,请大家谅解,再次感谢支持taycms的朋友们,虽然比较慢,我们还是会一直更新下去的。谢谢您的关注。有什么建议可以到论坛提出,或者直接给我QQ留言。 2.0会有很多新功能,请关注官方论坛TayCMS 1.8 升级日志此版本修复了不少BUG1.更换图片切换JS , 不会再有错误提示2.增加资料下载模块3.更换默认模版,使程序功能和页面结构更清晰,方便参考制作模版4.修复留
今天的内容就到这里,你学会了吗?










