首页 > 代码库 > 图片懒加载
图片懒加载
原理
目的： 减少请求数或者是延迟请求数，优化性能
实现方式：1、滚动条检测，仅加载可视区的图片
2、条件加载， 符合条件或者是触发事件时加载
3、延迟加载， setTimeout或者是setInteval
方式一实现图片懒加载原理：
1.将图片的真实地址暂存在一个自定义属性中，例如lazy-src中，src地址用其他图片或者是占位图片代替
2.计算可视区域，当图片位置出现在可视区域内时，将src替换为真实的地址，加载图片
eg：
<img src="../imgs/substitute.png" lazy-src="imgs/demo.png"/>
实现：
html：
<ul id="gallary"> <li><a href="#" title="picture1"><img lazy-src="../images/1.jpg" src="../images/placeholder.png"></a></li> <li><a href="#" title="picture2"><img lazy-src="../images/2.jpg" src="../images/placeholder.png"></a></li> <li><a href="#" title="picture3"><img lazy-src="../images/3.jpg" src="../images/placeholder.png"></a></li> <li><a href="#" title="picture4"><img lazy-src="../images/4.jpg" src="../images/placeholder.png"></a></li> <li><a href="#" title="picture5"><img lazy-src="../images/5.jpg" src="../images/placeholder.png"></a></li>.........</ul>
js:
//load the imagefunction loadImg(index){ var gallary = document.getElementById("gallary"); var img = gallary.children[index].children[0].children[0]; var src = http://www.mamicode.com/img.getAttribute("lazy-src"); img.src = src;}//get the height of the objectfunction getHeight(obj){ var height = 0; while(obj){ height += obj.offsetTop; obj = obj.offsetParent; } return height;}//examine the state of the windowwindow.onscroll = function(){ var gallary = document.getElementById("gallary"); var lis = gallary.children; var seeHeight, li, height; for(var i=0, len=lis.length; i<len; i++){ li = lis[i]; seeHeight = document.documentElement.clientHeight + document.body.scrollTop; height = getHeight(li); if(height < seeHeight){ loadImg(i); } }}window.onload = function(){ window.onscroll();}
效果：
完整代码：
<!DOCTYPE html><html><head><meta charset="utf-8"><style type="text/css">body{ background: url(../images/12.jpg); background-size: cover;}#gallary{ margin: 10px auto; padding: 40px; list-style: none; width:1060px;}#gallary li{ float: left; width: 206px; height: 160px; oveflow: visible;}#gallary li a{ color: #333; text-decoration: none; font-size: 4px; display: block; text-align: center; background-color: #FFF; padding: 3px; opacity: 0.8; box-shadow: 0 0 5px 2px #333;}#gallary li a{ -webkit-transition: all 500ms linear; -moz-transition: all 500ms linear; transition: all 500ms linear; -webkit-transfrom-origin: 0 0; -moz-transfrom-origin: 0 0; transfrom-origin: 0 0; -webkit-transform: rotate(-15deg); -moz-transform: rotate(-15deg); transform: rotate(-15deg);}#gallary li a img{ width: 200px;}#gallary li:nth-child(3n) a{ -webkit-transform: rotate(20deg); -moz-transform: rotate(20deg); transform: rotate(20deg);}#gallary li:nth-child(4n) a{ -webkit-transform: rotate(15deg); -moz-transform: rotate(15deg); transform: rotate(15deg);}#gallary li:nth-child(7n) a{ -webkit-transform: rotate(-10deg); -moz-transform: rotate(-10deg); transform: rotate(-10deg);}#gallary li:nth-child(9n) a{ -webkit-transform: rotate(-20deg); -moz-transform: rotate(-20deg); transform: rotate(-20deg);}#gallary li a:hover{ position: relative; z-index: 1; opacity: 1; -webkit-transform: rotate(0deg) scale(2); -moz-transform: rotate(0deg) scale(2); transform: rotate(0deg) scale(2);}#gallary li a:hover:after{ content: attr(title);}</style></head><body><ul id="gallary"> <li><a href="#" title="picture1"><img lazy-src="../images/1.jpg" src="../images/placeholder.png"></a></li> <li><a href="#" title="picture2"><img lazy-src="../images/2.jpg" src="../images/placeholder.png"></a></li> <li><a href="#" title="picture3"><img lazy-src="../images/3.jpg" src="../images/placeholder.png"></a></li> <li><a href="#" title="picture4"><img lazy-src="../images/4.jpg" src="../images/placeholder.png"></a></li> <li><a href="#" title="picture5"><img lazy-src="../images/5.jpg" src="../images/placeholder.png"></a></li> <li><a href="#" title="picture1"><img lazy-src="../images/1.jpg" src="../images/placeholder.png"></a></li> <li><a href="#" title="picture2"><img lazy-src="../images/2.jpg" src="../images/placeholder.png"></a></li> <li><a href="#" title="picture3"><img lazy-src="../images/3.jpg" src="../images/placeholder.png"></a></li> <li><a href="#" title="picture4"><img lazy-src="../images/4.jpg" src="../images/placeholder.png"></a></li> <li><a href="#" title="picture5"><img lazy-src="../images/5.jpg" src="../images/placeholder.png"></a></li> <li><a href="#" title="picture7"><img lazy-src="../images/7.jpg" src="../images/placeholder.png"></a></li> <li><a href="#" title="picture8"><img lazy-src="../images/8.jpg" src="../images/placeholder.png"></a></li> <li><a href="#" title="picture9"><img lazy-src="../images/9.jpg" src="../images/placeholder.png"></a></li> <li><a href="#" title="picture10"><img lazy-src="../images/10.jpg" src="../images/placeholder.png"></a></li> <li><a href="#" title="picture6"><img lazy-src="../images/11.jpg" src="../images/placeholder.png"></a></li> <li><a href="#" title="picture1"><img lazy-src="../images/1.jpg" src="../images/placeholder.png"></a></li> <li><a href="#" title="picture2"><img lazy-src="../images/2.jpg" src="../images/placeholder.png"></a></li> <li><a href="#" title="picture3"><img lazy-src="../images/3.jpg" src="../images/placeholder.png"></a></li> <li><a href="#" title="picture4"><img lazy-src="../images/4.jpg" src="../images/placeholder.png"></a></li> <li><a href="#" title="picture5"><img lazy-src="../images/5.jpg" src="../images/placeholder.png"></a></li> <li><a href="#" title="picture7"><img lazy-src="../images/7.jpg" src="../images/placeholder.png"></a></li> <li><a href="#" title="picture8"><img lazy-src="../images/8.jpg" src="../images/placeholder.png"></a></li> <li><a href="#" title="picture9"><img lazy-src="../images/9.jpg" src="../images/placeholder.png"></a></li> <li><a href="#" title="picture10"><img lazy-src="../images/10.jpg" src="../images/placeholder.png"></a></li> <li><a href="#" title="picture6"><img lazy-src="../images/11.jpg" src="../images/placeholder.png"></a></li> <li><a href="#" title="picture1"><img lazy-src="../images/1.jpg" src="../images/placeholder.png"></a></li> <li><a href="#" title="picture2"><img lazy-src="../images/2.jpg" src="../images/placeholder.png"></a></li> <li><a href="#" title="picture3"><img lazy-src="../images/3.jpg" src="../images/placeholder.png"></a></li> <li><a href="#" title="picture4"><img lazy-src="../images/4.jpg" src="../images/placeholder.png"></a></li> <li><a href="#" title="picture5"><img lazy-src="../images/5.jpg" src="../images/placeholder.png"></a></li> <li><a href="#" title="picture7"><img lazy-src="../images/7.jpg" src="../images/placeholder.png"></a></li> <li><a href="#" title="picture8"><img lazy-src="../images/8.jpg" src="../images/placeholder.png"></a></li> <li><a href="#" title="picture9"><img lazy-src="../images/9.jpg" src="../images/placeholder.png"></a></li> <li><a href="#" title="picture10"><img lazy-src="../images/10.jpg" src="../images/placeholder.png"></a></li> <li><a href="#" title="picture6"><img lazy-src="../images/11.jpg" src="../images/placeholder.png"></a></li> <li><a href="#" title="picture1"><img lazy-src="../images/1.jpg" src="../images/placeholder.png"></a></li> <li><a href="#" title="picture2"><img lazy-src="../images/2.jpg" src="../images/placeholder.png"></a></li> <li><a href="#" title="picture3"><img lazy-src="../images/3.jpg" src="../images/placeholder.png"></a></li> <li><a href="#" title="picture4"><img lazy-src="../images/4.jpg" src="../images/placeholder.png"></a></li> <li><a href="#" title="picture5"><img lazy-src="../images/5.jpg" src="../images/placeholder.png"></a></li> <li><a href="#" title="picture7"><img lazy-src="../images/7.jpg" src="../images/placeholder.png"></a></li> <li><a href="#" title="picture8"><img lazy-src="../images/8.jpg" src="../images/placeholder.png"></a></li> <li><a href="#" title="picture9"><img lazy-src="../images/9.jpg" src="../images/placeholder.png"></a></li> <li><a href="#" title="picture10"><img lazy-src="../images/10.jpg" src="../images/placeholder.png"></a></li> <li><a href="#" title="picture6"><img lazy-src="../images/11.jpg" src="../images/placeholder.png"></a></li> <li><a href="#" title="picture1"><img lazy-src="../images/1.jpg" src="../images/placeholder.png"></a></li> <li><a href="#" title="picture2"><img lazy-src="../images/2.jpg" src="../images/placeholder.png"></a></li> <li><a href="#" title="picture3"><img lazy-src="../images/3.jpg" src="../images/placeholder.png"></a></li> <li><a href="#" title="picture4"><img lazy-src="../images/4.jpg" src="../images/placeholder.png"></a></li> <li><a href="#" title="picture5"><img lazy-src="../images/5.jpg" src="../images/placeholder.png"></a></li> <li><a href="#" title="picture7"><img lazy-src="../images/7.jpg" src="../images/placeholder.png"></a></li> <li><a href="#" title="picture8"><img lazy-src="../images/8.jpg" src="../images/placeholder.png"></a></li> <li><a href="#" title="picture9"><img lazy-src="../images/9.jpg" src="../images/placeholder.png"></a></li> <li><a href="#" title="picture10"><img lazy-src="../images/10.jpg" src="../images/placeholder.png"></a></li> <li><a href="#" title="picture6"><img lazy-src="../images/11.jpg" src="../images/placeholder.png"></a></li> <li><a href="#" title="picture1"><img lazy-src="../images/1.jpg" src="../images/placeholder.png"></a></li> <li><a href="#" title="picture2"><img lazy-src="../images/2.jpg" src="../images/placeholder.png"></a></li> <li><a href="#" title="picture3"><img lazy-src="../images/3.jpg" src="../images/placeholder.png"></a></li> <li><a href="#" title="picture4"><img lazy-src="../images/4.jpg" src="../images/placeholder.png"></a></li> <li><a href="#" title="picture5"><img lazy-src="../images/5.jpg" src="../images/placeholder.png"></a></li> <li><a href="#" title="picture7"><img lazy-src="../images/7.jpg" src="../images/placeholder.png"></a></li> <li><a href="#" title="picture8"><img lazy-src="../images/8.jpg" src="../images/placeholder.png"></a></li> <li><a href="#" title="picture9"><img lazy-src="../images/9.jpg" src="../images/placeholder.png"></a></li> <li><a href="#" title="picture10"><img lazy-src="../images/10.jpg" src="../images/placeholder.png"></a></li> <li><a href="#" title="picture6"><img lazy-src="../images/11.jpg" src="../images/placeholder.png"></a></li> <li><a href="#" title="picture1"><img lazy-src="../images/1.jpg" src="../images/placeholder.png"></a></li> <li><a href="#" title="picture2"><img lazy-src="../images/2.jpg" src="../images/placeholder.png"></a></li> <li><a href="#" title="picture3"><img lazy-src="../images/3.jpg" src="../images/placeholder.png"></a></li> <li><a href="#" title="picture4"><img lazy-src="../images/4.jpg" src="../images/placeholder.png"></a></li> <li><a href="#" title="picture5"><img lazy-src="../images/5.jpg" src="../images/placeholder.png"></a></li> <li><a href="#" title="picture7"><img lazy-src="../images/7.jpg" src="../images/placeholder.png"></a></li> <li><a href="#" title="picture8"><img lazy-src="../images/8.jpg" src="../images/placeholder.png"></a></li> <li><a href="#" title="picture9"><img lazy-src="../images/9.jpg" src="../images/placeholder.png"></a></li> <li><a href="#" title="picture10"><img lazy-src="../images/10.jpg" src="../images/placeholder.png"></a></li> <li><a href="#" title="picture6"><img lazy-src="../images/11.jpg" src="../images/placeholder.png"></a></li> <li><a href="#" title="picture1"><img lazy-src="../images/1.jpg" src="../images/placeholder.png"></a></li> <li><a href="#" title="picture2"><img lazy-src="../images/2.jpg" src="../images/placeholder.png"></a></li> <li><a href="#" title="picture3"><img lazy-src="../images/3.jpg" src="../images/placeholder.png"></a></li> <li><a href="#" title="picture4"><img lazy-src="../images/4.jpg" src="../images/placeholder.png"></a></li> <li><a href="#" title="picture5"><img lazy-src="../images/5.jpg" src="../images/placeholder.png"></a></li> <li><a href="#" title="picture7"><img lazy-src="../images/7.jpg" src="../images/placeholder.png"></a></li> <li><a href="#" title="picture8"><img lazy-src="../images/8.jpg" src="../images/placeholder.png"></a></li> <li><a href="#" title="picture9"><img lazy-src="../images/9.jpg" src="../images/placeholder.png"></a></li> <li><a href="#" title="picture10"><img lazy-src="../images/10.jpg" src="../images/placeholder.png"></a></li> <li><a href="#" title="picture6"><img lazy-src="../images/11.jpg" src="../images/placeholder.png"></a></li></ul><script>//load the imagefunction loadImg(index){ var gallary = document.getElementById("gallary"); var img = gallary.children[index].children[0].children[0]; var src = img.getAttribute("lazy-src"); img.src = src;}//get the height of the objectfunction getHeight(obj){ var height = 0; while(obj){ height += obj.offsetTop; obj = obj.offsetParent; } return height;}//examine the state of the windowwindow.onscroll = function(){ var gallary = document.getElementById("gallary"); var lis = gallary.children; var seeHeight, li, height; for(var i=0, len=lis.length; i<len; i++){ li = lis[i]; seeHeight = document.documentElement.clientHeight + document.body.scrollTop; height = getHeight(li); if(height < seeHeight){ loadImg(i); } }}window.onload = function(){ window.onscroll();}</script></body></html>
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。