图片的懒加载问题
程序员文章站
2022-04-21 23:33:04
...
我们在浏览淘宝京东等大型购物网页时会经常出现许多图片而图片需要花费我们非常多的流量问题。
我们在写网页的时候怎么解决这个问题呢?这时候就要用到我们图片懒加载的问题,这样不仅可以
解决流量问题,也提高了性能等等。
下面我们就来看一下图片的懒加载怎么问题。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
padding: 0;
list-style-type: none;
}
html,body{
width: 100%;
height: 100%;
}
#div div{
width: 400px;
height: 500px;
/*border:1px solid #000;*/
display: inline-block;
margin:10px;
}
img{
width: 100%;
height: 100%;
}
</style>
<script>
// 获取距离父级距离
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<aImg.length;i++){ //循环所有的img,把它距离页面顶部的距离 和 滚动高度+可视区的高度进行比较
if(oScr > getPos(aImg[i]).top){
aImg[i].src=aImg[i].getAttribute('_src'); //给src属性赋值
}
}
}
</script>
</head>
<body>
<div id="div">
<div><img _src="img/1.jpg"></div>
<div><img _src="img/2.jpg"></div>
<div><img _src="img/3.jpg"></div>
<div><img _src="img/4.jpg"></div>
<div><img _src="img/5.jpg"></div>
<div><img _src="img/6.jpg"></div>
<div><img _src="img/7.jpg"></div>
<div><img _src="img/8.jpg"></div>
<div><img _src="img/9.jpg"></div>
<div><img _src="img/10.jpg"></div>
<div><img _src="img/11.jpg"></div>
<div><img _src="img/12.jpg"></div>
<div><img _src="img/13.jpg"></div>
<div><img _src="img/14.jpg"></div>
<div><img _src="img/15.jpg"></div>
</div>
</body>
</html>
今天的内容就到这里,你学会了吗?
以上就是图片的懒加载问题的详细内容,更多请关注其它相关文章!
上一篇: 提示:413 Request Entity Too Large 的解决方法 鬼恋the entity在线 multipartentity entitymanage
下一篇: php随机生成汉字实现方法
推荐阅读
-
尝试加载 Oracle 客户端库时引发 BadImageFormatException。如果在安装 32 位 Oracle 客户端组件的情况下以 64 位模式运行,将出现此问题。
-
关于PHP 调用数据库图片地址,实现轮显的有关问题
-
使用async await通过for循环在图片onload加载成功后获取成功的图片地址
-
通过vue-router懒加载解决首次加载时资源过多导致的速度缓慢问题
-
webpack之引入图片的实现及问题
-
window.onload 加载完毕的问题及解决方案(上)_javascript技巧
-
Android高效安全加载图片的方法详解
-
log4j-over-slf4的log4j Loger加载问题
-
spring加载xml去远程获取dtd验证xml的问题
-
如何屏蔽这样的下载 请高人点拨一下,问题有图片_html/css_WEB-ITnose