首先咱们来说一下什么是懒加载。
个人理解懒加载也就是惰性加载,即需要的时候再加载出来,不需要时就不加载,避免了浏览器资源的浪费。
懒加载的原理:
1.将真实的图片地址保存到自定义属性中,不给到图片的src,并且将该节点隐藏。
2.创建一个临时图片节点,用来判断资源能否加载成功。能够加载成功就展示图片
懒加载作用(优点):
1.防止图片加载不成功出现破图。
2.页面中资源很多,只有用户到达当前位置才开始加载资源。有效的避免了浏览器资源的浪费,有利于性能优化。
<title>图片懒加载</title>
<style>
*{
margin: 0;
padding: 0;
}
#box{
width: 300px;
height: 300px;
margin: 50px auto;
background: url(./img/3.jpg) center no-repeat ;
}
.my{
width: 300px;
height: 300px;
display: none;
}
</style>
</head>
<body>
<div id="box">
<img class="my" src="" ziarr="./img/2.jpg" alt="&