图片懒加载 - 走看看

zoukankan html css js c++ java

图片懒加载

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<style type="text/css">
*{margin:0;padding:0;}
ul{overflow:hidden;}
li{list-style:none;10rem;height:12rem;border:1px solid #ccc;box-sizing:border-box;-webkit-box-sizing:border-box;float:left;overflow:hidden;position:relative;}
li i{20px;height:20px;border-radius:20px;position:absolute;border:2px solid #6feb95;z-index:0;left:50%;top:50%;margin-top:-11px;margin-left:-11px;animation:move 1s infinite;-webkit-animation:move 1s infinite;}
li i:before{position:absolute;5px;height:5px;border-radius:4px;content:'';box-shadow:0 0 10px #666;-webkit-box-shadow:0 0 10px #666;background:#fff;border:1px solid #fff;top:-3px;left:50%;margin-left:-3px;}
img{vertical-align:middle;border-0;100%;position:relative;z-index:1;}
@keyframes move{
0%{
transform:rotateZ(0);
}
100%{
transform:rotateZ(360deg);
}
}
@-webkit-keyframes move{
0%{
-webkit-transform:rotateZ(0);
}
100%{
-webkit-transform:rotateZ(360deg);
}
}

</style>
<body>
<div>


<ul>
<li data-src="http://pic.58pic.com/58pic/17/18/97/01U58PIC4Xr_1024.jpg"></li>
<li data-src="http://cover.read.duokan.com/mfsv2/download/fdsc3/p01N203pHTU7/Wr5314kcLAtVCi.jpg!t"></li>
<li data-src="http://77fkxu.com1.z0.glb.clouddn.com/20160308/1457402219_73571.jpg"></li>
<li data-src="http://cover.read.duokan.com/mfsv2/download/fdsc3/p01a3SXHo2hZ/XYAC5TLk4uYWXn.jpg!t"></li>
<li data-src="http://pic1.cxtuku.com/00/16/18/b3809a2ba0f3.jpg"></li>
<li data-src="http://img.bitscn.com/upimg/allimg/c150708/14363B06253120-6060O.jpg"></li>
<li data-src="http://pic.58pic.com/58pic/17/18/97/01U58PIC4Xr_1024.jpg"></li>
<li data-src="http://cover.read.duokan.com/mfsv2/download/fdsc3/p015trgKM7vw/H0iyDPPneOVrA4.jpg!t"></li>
<li data-src="http://77fkxu.com1.z0.glb.clouddn.com/20160308/1457402219_73571.jpg"></li>
<li data-src="http://imgsrc.baidu.com/baike/pic/item/2f9cbdcc5e0bcf5c00e9283b.jpg"></li>
<li data-src="http://pic1.cxtuku.com/00/16/18/b3809a2ba0f3.jpg"></li>
<li data-src="http://img.bitscn.com/upimg/allimg/c150708/14363B06253120-6060O.jpg"></li>
<li data-src="http://pic.58pic.com/58pic/17/18/97/01U58PIC4Xr_1024.jpg"></li>
<li data-src="http://cover.read.duokan.com/mfsv2/download/fdsc3/p015trgKM7vw/H0iyDPPneOVrA4.jpg!t"></li>
<li data-src="http://77fkxu.com1.z0.glb.clouddn.com/20160308/1457402219_73571.jpg"></li>
<li data-src="http://imgsrc.baidu.com/baike/pic/item/2f9cbdcc5e0bcf5c00e9283b.jpg"></li>
<li data-src="http://pic1.cxtuku.com/00/16/18/b3809a2ba0f3.jpg"></li>
<li data-src="http://img.bitscn.com/upimg/allimg/c150708/14363B06253120-6060O.jpg"></li>
<li data-src="http://pic.58pic.com/58pic/17/18/97/01U58PIC4Xr_1024.jpg"></li>
<li data-src="http://cover.read.duokan.com/mfsv2/download/fdsc3/p015trgKM7vw/H0iyDPPneOVrA4.jpg!t"></li>
<li data-src="http://77fkxu.com1.z0.glb.clouddn.com/20160308/1457402219_73571.jpg"></li>
<li data-src="http://imgsrc.baidu.com/baike/pic/item/2f9cbdcc5e0bcf5c00e9283b.jpg"></li>
<li data-src="http://pic1.cxtuku.com/00/16/18/b3809a2ba0f3.jpg"></li>
<li data-src="http://img.bitscn.com/upimg/allimg/c150708/14363B06253120-6060O.jpg"></li>
<li data-src="http://pic.58pic.com/58pic/17/18/97/01U58PIC4Xr_1024.jpg"></li>
<li data-src="http://cover.read.duokan.com/mfsv2/download/fdsc3/p015trgKM7vw/H0iyDPPneOVrA4.jpg!t"></li>
<li data-src="http://77fkxu.com1.z0.glb.clouddn.com/20160308/1457402219_73571.jpg"></li>
<li data-src="http://imgsrc.baidu.com/baike/pic/item/2f9cbdcc5e0bcf5c00e9283b.jpg"></li>
<li data-src="http://pic1.cxtuku.com/00/16/18/b3809a2ba0f3.jpg"></li>
<li data-src="http://img.bitscn.com/upimg/allimg/c150708/14363B06253120-6060O.jpg"></li>
<li data-src="http://pic.58pic.com/58pic/17/18/97/01U58PIC4Xr_1024.jpg"></li>
<li data-src="http://cover.read.duokan.com/mfsv2/download/fdsc3/p015trgKM7vw/H0iyDPPneOVrA4.jpg!t"></li>
<li data-src="http://77fkxu.com1.z0.glb.clouddn.com/20160308/1457402219_73571.jpg"></li>
<li data-src="http://imgsrc.baidu.com/baike/pic/item/2f9cbdcc5e0bcf5c00e9283b.jpg"></li>
<li data-src="http://pic1.cxtuku.com/00/16/18/b3809a2ba0f3.jpg"></li>
<li data-src="http://img.bitscn.com/upimg/allimg/c150708/14363B06253120-6060O.jpg"></li>
</ul>

<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
</body>
<script type="text/javascript">
// window.onload=function(){
// console.log('aa.html5555');
// }

// (function(){//立即执行函数
// let imgList = [],delay,time = 250,offset = 0;
// function _delay(){//函数节流
// clearTimeout(delay);
// delay = setTimeout(() => {
// _loadImg();
// },time)
// };
// function _loadImg(){//执行图片加载
// for(let i = 0,len = imgList.length; i < len; i++){
// if(_isShow(imgList[i])){

// imgList[i].src = imgList[i].getAttribute('data-src');
// imgList.splice(i,1);
// }
// }
// };
// function _isShow(el){//判断img是否出现在可视窗口
// let coords = el.getBoundingClientRect();

// return (coords.left >= 0 && coords.left >= 0 && coords.top) <= (document.documentElement.clientHeight || window.innerHeight) + parseInt(offset);
// };
// function imgLoad(selector){//获取所有需要实现懒加载图片对象引用并设置window监听事件scroll
// _selector = selector || '.imgLazyLoad';
// let nodes = document.querySelectorAll(_selector);
// imgList = Array.apply(null,nodes);
// console.log(imgList);
// window.addEventListener('scroll',_delay,false)
// };
// imgLoad('.imgLazyLoad')
// })()

/* 获取节点 */
var oUl = document.getElementsByTagName('ul')[0];
var aLi = oUl.getElementsByTagName('li');

/* 创建img标签函数 */
function createImg(obj){
var src = '';
if(obj.dataset.src){
src = obj.dataset.src;
console.log( obj.dataset)
}else{
src = obj.getAttribute('data-src');
console.log(src)
}
if(obj.children.length <= 1){
console.log(obj.children)
var img = document.createElement('img');
img.src = src;
// obj.appendChild(img);
}
}

/* 计算节点到文档顶部的距离 */
function getTop(obj){
var h = 0;
while(obj){
h += obj.offsetTop;
obj = obj.offsetParent;
}
return h;
}

/* 滚动实时计算所到区域并进行相关计算 */
window.onscroll = function(){
var t = document.documentElement.clientHeight + (document.body.scrollTop || document.documentElement.scrollTop);
for(var i=0;i<aLi.length;i++){
if(getTop(aLi[i]) < t){
setTimeout('createImg(aLi['+i+'])',500)
}
}
}

/* 页面加载完便执行一次滚动函数 */
window.onload = function(){
window.onscroll();
}

</script>
</html>

查看全文

相关阅读:
转发微博 Qzone 微信草根创业英雄时代落幕：贾跃亭戴威们一去不复返
 python 发送大Json格式数据
 python post json数据
 python post 参数
 IntelliJ Idea 常用10款插件（提高开发效率）
IDEA操作技巧：一些常用且实用的插件
 nacos
Sentinel 与 Hystrix 的对比
 阿里启动新项目：Nacos，比 Eureka 更强！
D3.js学习（一）

原文地址：https://www.cnblogs.com/wangjianping123/p/9419855.html