图片懒加载
HTML部分:
- 内容请看以下代码呈现:
<ul>
<li data-src="images/show1.jpg">
<i></i>
</li>
<li data-src="images/show2.jpg">
<i></i>
</li>
<li data-src="images/show3.jpg">
<i></i>
</li>
<li data-src="images/show4.jpg">
<i></i>
</li>
<li data-src="images/show5.jpg">
<i></i>
</li>
<li data-src="images/show6.jpg">
<i></i>
</li>
<li data-src="images/show7.jpg">
<i></i>
</li>
<li data-src="images/show8.jpg">
<i></i>
</li>
<li data-src="images/show9.jpg">
<i></i>
</li>
<li data-src="images/show9.jpg">
<i></i>
</li>
<li data-src="images/show6.jpg">
<i></i>
</li>
<li data-src="images/show7.jpg">
<i></i>
</li>
<li data-src="images/show8.jpg">
<i></i>
</li>
<li data-src="images/show9.jpg">
<i></i>
</li>
<li data-src="images/show9.jpg">
<i></i>
</li>
<li data-src="images/show9.jpg">
<i></i>
</li>
</ul>
正如以上呈现的HTML部分相比较为简单主要是个UL li 组成,特别注意的有个data-src属性后文会着重强调
css部分
- 此部分内容用到部分H5的内容所以看不懂得小伙伴们可以先普及下H5的知识
/*网页的全局样式 解决兼容问题*/
body,div,p,ul,ol,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,table,tr,td,form,input,select,textarea,span,img,a,em,strong,*{ margin:0; padding:0;}
body{ font-family:"宋体"; font-size:12px; color:#000000;}
ul,ol,li{ list-style:none;}
h1,h2,h3,h4,h5,h6{ font-size:14px;}
input,select,textarea{ vertical-align:middle;}
img{ border:none; vertical-align:middle;}
a{ text-decoration:none; color:#333333;}
a:hover{ color:#009999;}
.clear{ clear:both; height:0px; width:0px; overflow:hidden;}
ul{
overflow:hidden;
width:800px;
margin:0 auto;
}
li{
width:50%;
height:7rem;
border:1px solid #ccc;
box-sizing:border-box;
float: left;
overflow: hidden;
position: relative;
}
li i{
width:20px;
height:20px;
border-radius: 20px;
position: absolute;
border:2px solid #21d658;
z-index: 0;
left: 50%;
top:50%;
margin-top:-11px;
margin-left: -11px;
animation: move 1s infinite;
}
li i:before{
position: absolute;
width:5px;
height:5px;
border-radius: 4px;
content: "";
box-shadow: 0 0 10px #666;
background: #fff;
border:1px solid #fff;
top:-3px;
left:50%;
margin-left: -3px;
}
img{
vertical-align:middle;
border-width:0;
width:100%;
position: relative;
z-index: 1;
}
@keyframes move{
0%{
transform:rotateZ(0);
}
100%{
transform:rotateZ(360deg);
}
}
代码呈现部分我用到了CONMON.css如果不晓得的话,我也有一个公司的标准,具体在本人页面浏览注意
JS部分
- 此部分为关键部分特别地方以加有注释
<script>
//获取DOM中元素
var ULL = document.getElementsByTagName("ul")[0],
ULI = ULL.getElementsByTagName("li");
//创建图片部分
function Img(option){
var src = "";
if (option.dataset.src) {
src = option.dataset.src;
}else{
src = option.getAttribute("src");
}
if (option.children.length<=1) {
var img = document.createElement("img");
img.src = src;
option.appendChild(img);
}
}
//算出偏移量
function Top(obj){
var result = 0;
//此处是一个循环
while(obj){
result += obj.offsetTop;
obj = obj.offsetParent;
}
return result;
}
//绑定滚轮事件
window.onscroll=function(){
var ViewH = document.documentElement.clientHeight || document.body.clientHeight,
top = document.documentElement.scrollTop || document.body.scrollTop,
ViewTop = ViewH + top;
for(var i = 0 ; i < ULI.length ; i++){
//由于超时调用最后执行,所以要保留this指针完成this的替代
//判断当前滑动的高度大于每一个元素的高度完成任务
if (Top(ULI[i])<ViewTop) {
//调用函数完成任务 此时可以保留I
FN(ULI[i])
// setTimeout(, delay[, lang])
}
}
//引入一个超时调用
function FN(OBJ){
setTimeout(function(){
Img(OBJ);
},1000)
}
}
//绑定onLOAd事件
window.onload=function(){
window.onscroll();
}
</script>
希望各位脚本伙伴们能够一起努力!!