- 页面中的img元素，如果没有src属性，浏览器就不会发出请求去下载图片，只有通过javascript设置了图片路径，浏览器才会发送请求。
- 加载图片的过程是异步的
一、懒加载
1、介绍
- 懒加载也就是延迟加载。
- 当访问一个页面的时候，先把所有img标签的src设为同一张空白图片的路径（占位图，只需请求一次），将其真正的图片地址存储在img标签的自定义属性中（比如data-src）
-
两种加载情况：
- 条件加载：符合某些条件，或触发了某些事件，才将自定义属性中的地址存储到src属性中，开始异步加载
-
可视区加载：仅加载用户可以看到的区域。当js监听到该图片元素进入可视窗口时，将自定义属性中的地址存储到src属性中，开始异步加载。
#1、既然懒加载的原理是基于判断元素是否出现在窗口可视范围内，首先我们写一个函数判断元素是否出现在可视范围内： function isVisible($node){ var winH = $(window).height(), scrollTop = $(window).scrollTop(), offSetTop = $(window).offSet().top; if (offSetTop < winH + scrollTop) { return true; } else { return false; } } #2、再添加上浏览器的事件监听函数，让浏览器每次滚动就检查元素是否出现在窗口可视范围内： $(window).on("scroll", function{ if (isVisible($node)){ console.log(true); } }) #3、我们已经很接近了，现在我们要做的是，让元素只在第一次被检查到时打印true，之后就不再打印了 var hasShowed = false; $(window).on("sroll",function{ if (hasShowed) { return; } else { if (isVisible($node)) { hasShowed = !hasShowed; console.log(true); } } })
实现代码：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.js 5 "></script> 6 <title>demo lazyload</title> 7 <meta charset="utf-8"> 8 <style type="text/css"> 9 * { 10 padding: 0; 11 margin: 0; 12 text-decoration: none; 13 list-style: none; 14 } 15 .layout { 16 margin: 0 auto; 17 width: 1000px; 18 } 19 .lazyload img { 20 width: 300px; 21 height: 400px; 22 } 23 .img-ct { 24 margin-left: -50px; 25 overflow: auto; 26 } 27 .item { 28 float: left; 29 margin-left: 50px; 30 margin-bottom: 30px; 31 } 32 </style> 33 </head> 34 <body> 35 <div class="lazyload"> 36 <div class="layout"> 37 <ul class="img-ct"> 38 <li class="item"> 39 <a href="javascript:void(0)"><img data-img="img/Tsingtao.jpeg" src="img/blank.jpg"></a> 40 </li> 41 <li class="item"> 42 <a href="javascript:void(0)"><img data-img="img/Tsingtao.jpeg" src="img/blank.jpg"></a> 43 </li> 44 <li class="item"> 45 <a href="javascript:void(0)"><img data-img="img/Tsingtao.jpeg" src="img/blank.jpg"></a> 46 </li> 47 <li class="item"> 48 <a href="javascript:void(0)"><img data-img="img/Tsingtao.jpeg" src="img/blank.jpg"></a> 49 </li> 50 <li class="item"> 51 <a href="javascript:void(0)"><img data-img="img/Tsingtao.jpeg" src="img/blank.jpg"></a> 52 </li> 53 <li class="item"> 54 <a href="javascript:void(0)"><img data-img="img/Tsingtao.jpeg" src="img/blank.jpg"></a> 55 </li> 56 <li class="item"> 57 <a href="javascript:void(0)"><img data-img="img/Tsingtao.jpeg" src="img/blank.jpg"></a> 58 </li> 59 <li class="item"> 60 <a href="javascript:void(0)"><img data-img="img/Tsingtao.jpeg" src="img/blank.jpg"></a> 61 </li> 62 <li class="item"> 63 <a href="javascript:void(0)"><img data-img="img/Tsingtao.jpeg" src="img/blank.jpg"></a> 64 </li> 65 <li class="item"> 66 <a href="javascript:void(0)"><img data-img="img/Tsingtao.jpeg" src="img/blank.jpg"></a> 67 </li> 68 <li class="item"> 69 <a href="javascript:void(0)"><img data-img="img/Tsingtao.jpeg" src="img/blank.jpg"></a> 70 </li> 71 <li class="item"> 72 <a href="javascript:void(0)"><img data-img="img/Tsingtao.jpeg" src="img/blank.jpg"></a> 73 </li> 74 <li class="item"> 75 <a href="javascript:void(0)"><img data-img="img/Tsingtao.jpeg" src="img/blank.jpg"></a> 76 </li> 77 <li class="item"> 78 <a href="javascript:void(0)"><img data-img="img/Tsingtao.jpeg" src="img/blank.jpg"></a> 79 </li> 80 </ul> 81 </div> 82 </div> 83 84 85 <script type="text/javascript"> 86 var lazyLoad = (function(){ 87 var clock; 88 89 function init(){ 90 $(window).on("scroll", function(){ 91 if (clock) { 92 clearTimeout(clock); 93 } 94 clock = setTimeout(function(){ 95 checkShow(); 96 }, 200); 97 }) 98 checkShow(); 99 } 100 101 function checkShow(){ 102 $(".lazyload img").each(function(){ 103 var $cur =$(this); 104 if($cur.attr('isLoaded')){ 105 return; 106 } 107 if(shouldShow($cur)){ 108 showImg($cur); 109 } 110 }) 111 } 112 function shouldShow($node){ 113 var scrollH = $(window).scrollTop(), 114 winH = $(window).height(), 115 top = $node.offset().top; 116 if(top < winH + scrollH){ 117 return true; 118 }else{ 119 return false; 120 } 121 } 122 function showImg($node){ 123 $node.attr('src', $node.attr('data-img')); 124 $node.attr('isLoaded', true); 125 } 126 return { 127 init: init 128 } 129 })() 130 lazyLoad.init(); 131 </script> 132 </body> 133 </html>