成都IT培训学校

js实现图片懒加载

2016-09-07 15:25 作者:峰极天下 来源:简书 浏览: 我要评论(条) 字号:

摘要:现如今,网站载有的信息量越来越大,其中图片占据着很大一部分,这样一来可以使整个页以面图文结合的形式展现,更加美观。 然而问题来了,如果是一个图片列表页,虽然好看,但是相关图片的加载要耗费非常长的时间,等待图片一格一格的加载,实在让人抓狂,如



  现如今,网站载有的信息量越来越大,其中图片占据着很大一部分,这样一来可以使整个页以面图文结合的形式展现,更加美观。
 
  然而问题来了,如果是一个图片列表页,虽然好看,但是相关图片的加载要耗费非常长的时间,等待图片一格一格的加载,实在让人抓狂,如何优化此类页面呢?
 
  解决的方法有两种(笔者自己总结,欢迎在文章评论中给我留言介绍其它方法):
 
  1.利用ajax技术将此类页面做成瀑布流
 
  2.图片懒加载
 
  综上所述,如果在没有ajax支持的情况下,图片懒加载是一个非常好的选择。
 
  原理:
 
  页面加载后只让文档可视区内的图片显示,其它不显示,随着用户对页面的滚动,判断其区域位置,生成img标签,让到可视区的图片加载出来(正所谓响应了党的号召:让一部分人先富起来,从而带动其他人富起来,最终实现共同富裕)。
 
  所用相关技术:
 
  给img的父级加属性 (例如data-src),将图片的地址赋值给他,这样就生成img标签后再把data-src的值赋给img的src(通过dataset.src或者getAttribute('src'),再赋值给img.setAttribute('src'))。
 
  相关代码
 
  ·css部分
 
  *{margin:0;padding:0;}
 
  ul{overflow:hidden;}
 
  li{list-style:none;width:10rem;height:12rem;border:1px solid #ccc;box-sizing:border-box;-webkit-box-sizing:border-box;float:left;overflow:hidden;position:relative;}
 
  li i{width: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;width: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-width:0;width: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);
 
  }
 
  }
 
  

  这里用css3写了一个可以循环转动的loading

  html部分
 
  <ul>
 
  <li data-src="http://pic.58pic.com/58pic/17/18/97/01U58PIC4Xr_1024.jpg"><i></i></li>
 
  <li data-src="http://cover.read.duokan.com/mfsv2/download/fdsc3/p01N203pHTU7/Wr5314kcLAtVCi.jpg!t"><i></i></li>
 
  <li data-src="http://77fkxu.com1.z0.glb.clouddn.com/20160308/1457402219_73571.jpg"><i></i></li>
 
  <li data-src="http://cover.read.duokan.com/mfsv2/download/fdsc3/p01a3SXHo2hZ/XYAC5TLk4uYWXn.jpg!t"><i></i></li>
 
  <li data-src="http://pic1.cxtuku.com/00/16/18/b3809a2ba0f3.jpg"><i></i></li>
 
  <li data-src="http://img.bitscn.com/upimg/allimg/c150708/14363B06253120-6060O.jpg"><i></i></li>
 
  <li data-src="http://pic.58pic.com/58pic/17/18/97/01U58PIC4Xr_1024.jpg"><i></i></li>
 
  <li data-src="http://cover.read.duokan.com/mfsv2/download/fdsc3/p015trgKM7vw/H0iyDPPneOVrA4.jpg!t"><i></i></li>
 
  <li data-src="http://77fkxu.com1.z0.glb.clouddn.com/20160308/1457402219_73571.jpg"><i></i></li>
 
  <li data-src="http://imgsrc.baidu.com/baike/pic/item/2f9cbdcc5e0bcf5c00e9283b.jpg"><i></i></li>
 
  <li data-src="http://pic1.cxtuku.com/00/16/18/b3809a2ba0f3.jpg"><i></i></li>
 
  <li data-src="http://img.bitscn.com/upimg/allimg/c150708/14363B06253120-6060O.jpg"><i></i></li>
 
  <li data-src="http://pic.58pic.com/58pic/17/18/97/01U58PIC4Xr_1024.jpg"><i></i></li>
 
  <li data-src="http://cover.read.duokan.com/mfsv2/download/fdsc3/p015trgKM7vw/H0iyDPPneOVrA4.jpg!t"><i></i></li>
 
  <li data-src="http://77fkxu.com1.z0.glb.clouddn.com/20160308/1457402219_73571.jpg"><i></i></li>
 
  <li data-src="http://imgsrc.baidu.com/baike/pic/item/2f9cbdcc5e0bcf5c00e9283b.jpg"><i></i></li>
 
  <li data-src="http://pic1.cxtuku.com/00/16/18/b3809a2ba0f3.jpg"><i></i></li>
 
  <li data-src="http://img.bitscn.com/upimg/allimg/c150708/14363B06253120-6060O.jpg"><i></i></li>
 
  <li data-src="http://pic.58pic.com/58pic/17/18/97/01U58PIC4Xr_1024.jpg"><i></i></li>
 
  <li data-src="http://cover.read.duokan.com/mfsv2/download/fdsc3/p015trgKM7vw/H0iyDPPneOVrA4.jpg!t"><i></i></li>
 
  <li data-src="http://77fkxu.com1.z0.glb.clouddn.com/20160308/1457402219_73571.jpg"><i></i></li>
 
  <li data-src="http://imgsrc.baidu.com/baike/pic/item/2f9cbdcc5e0bcf5c00e9283b.jpg"><i></i></li>
 
  <li data-src="http://pic1.cxtuku.com/00/16/18/b3809a2ba0f3.jpg"><i></i></li>
 
  <li data-src="http://img.bitscn.com/upimg/allimg/c150708/14363B06253120-6060O.jpg"><i></i></li>
 
  <li data-src="http://pic.58pic.com/58pic/17/18/97/01U58PIC4Xr_1024.jpg"><i></i></li>
 
  <li data-src="http://cover.read.duokan.com/mfsv2/download/fdsc3/p015trgKM7vw/H0iyDPPneOVrA4.jpg!t"><i></i></li>
 
  <li data-src="http://77fkxu.com1.z0.glb.clouddn.com/20160308/1457402219_73571.jpg"><i></i></li>
 
  <li data-src="http://imgsrc.baidu.com/baike/pic/item/2f9cbdcc5e0bcf5c00e9283b.jpg"><i></i></li>
 
  <li data-src="http://pic1.cxtuku.com/00/16/18/b3809a2ba0f3.jpg"><i></i></li>
 
  <li data-src="http://img.bitscn.com/upimg/allimg/c150708/14363B06253120-6060O.jpg"><i></i></li>
 
  <li data-src="http://pic.58pic.com/58pic/17/18/97/01U58PIC4Xr_1024.jpg"><i></i></li>
 
  <li data-src="http://cover.read.duokan.com/mfsv2/download/fdsc3/p015trgKM7vw/H0iyDPPneOVrA4.jpg!t"><i></i></li>
 
  <li data-src="http://77fkxu.com1.z0.glb.clouddn.com/20160308/1457402219_73571.jpg"><i></i></li>
 
  <li data-src="http://imgsrc.baidu.com/baike/pic/item/2f9cbdcc5e0bcf5c00e9283b.jpg"><i></i></li>
 
  <li data-src="http://pic1.cxtuku.com/00/16/18/b3809a2ba0f3.jpg"><i></i></li>
 
  <li data-src="http://img.bitscn.com/upimg/allimg/c150708/14363B06253120-6060O.jpg"><i></i></li>
 
  </ul>
 
    js部分
 
  /* 获取节点 */
 
  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;
 
  }else{
 
  src = obj.getAttribute('data-src');
 
  }
 
  if(obj.children.length <= 1){
 
  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();
 
  }
 
    demo在这,建议在手机端观看

顶一下
(0)
0%
踩一下
(0)
0%
标签:
版权所有: 非特殊声明均为本站原创文章,转载请注明出处: 成都学前端开发网-web.ixueyun.com
订阅更新: 您可以通过RSS订阅我们的内容更新

当前栏目分类