图片懒加载
基本步骤：
【1】网页中的图片都设为同一张图片
【2】给图片增加data-original = "img/test.jpg"的属性，保存图片的真实地址
【3】当触发某些条件时，自动改变该区域的图片的src属性为真实的地址
点击按钮显示图片：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style> body{ margin:0; } img{ width:100px; height:100px; } </style> </head> <body> <button>加载图片</button> <img src="#" alt="测试" data-original='img/test1.jpg'/> <script> var oBtn=document.getElementsByTagName('button')[0]; var oImg=document.images[0]; oBtn.onclick=function(){ oImg.src='http://img.lanrentuku.com/img/allimg/1212/5-121204193Q9-50.gif'; if(oImg.dataset){//oImg.dataset 访问在HTML或DOM中的元素上设置的所有自定义数据属性（data-*）集 aftLoadImg(oImg,oImg.dataset.original); }else{ aftLoadImg(oImg,oImg.getAttribute("data-original")); } } function aftLoadImg(obj,url){ var oImg = new Image();//等价于 document.createElement('img') oImg.onload=function(){ obj.src=oImg.src; } oImg.src=url;//运行在onload之前，把oImg的src先赋值 } </script> </body> </html>
可视区显示图片：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> body{ margin: 0; } ul{ margin: 0; padding: 0; list-style: none; width:400px; overflow:hideen; } img{ border: none; vertical-align: middle; } .in{ border: 1px solid black; margin: 10px; text-align: center; height: 400px; width: 400px; float: left; } .in img{ height: 400px; width: 400px; } </style> </head> <body> <ul class="list"> <li class="in"><img src="http://img.lanrentuku.com/img/allimg/1212/5-121204193Q9-50.gif" alt="测试" data-original = "img/test1.jpg"></li> <li class="in"><img src="http://img.lanrentuku.com/img/allimg/1212/5-121204193Q9-50.gif" alt="测试" data-original = "img/test2.jpg"></li> <li class="in"><img src="http://img.lanrentuku.com/img/allimg/1212/5-121204193Q9-50.gif" alt="测试" data-original = "img/test3.jpg"></li> <li class="in"><img src="http://img.lanrentuku.com/img/allimg/1212/5-121204193Q9-50.gif" alt="测试" data-original = "img/test4.jpg"></li> <li class="in"><img src="http://img.lanrentuku.com/img/allimg/1212/5-121204193Q9-50.gif" alt="测试" data-original = "img/test1.jpg"></li> <li class="in"><img src="http://img.lanrentuku.com/img/allimg/1212/5-121204193Q9-50.gif" alt="测试" data-original = "img/test2.jpg"></li> <li class="in"><img src="http://img.lanrentuku.com/img/allimg/1212/5-121204193Q9-50.gif" alt="测试" data-original = "img/test3.jpg"></li> <li class="in"><img src="http://img.lanrentuku.com/img/allimg/1212/5-121204193Q9-50.gif" alt="测试" data-original = "img/test4.jpg"></li> </ul> <script> var aImages = document.images; loadImg(aImages); window.onscroll = function(){ loadImg(aImages); }; function loadImg(arr){ for( var i = 0,len = arr.length; i < len; i++){ if(arr[i].getBoundingClientRect().top < document.documentElement.clientHeight && !arr[i].isLoad){ arr[i].isLoad = true; arr[i].style.cssText = "transition: ''; opacity: 0;" if(arr[i].dataset){ aftLoadImg(arr[i],arr[i].dataset.original); }else{ aftLoadImg(arr[i],arr[i].getAttribute("data-original")); } (function(i){ setTimeout(function(){ arr[i].style.cssText = "transition: 1s; opacity: 1;" },16) })(i); } } } function aftLoadImg(obj,url){ var oImg = new Image(); oImg.onload = function(){ obj.src = oImg.src; } oImg.src = url; } </script> </body> </html>
