一、懒加载
1.概念：
访问页面时，先把img元素的背景图片src替换成一张占位图，这样只需请求一次，当图片出现在浏览器的可视区域内时，再设置图片的真实路径，显示图片。
2.优点：
页面长图片多时，在首次载入时一次性加载会耗费时间长，使用懒加载可以使页面加载速度快、减轻服务器的压力、节约流量。
3.步骤：
页面中的img元素，若没有src属性，浏览器就不会发出请求去下载图片，只有通过Javascript设置了图片路径，浏览器才会发送请求。
1）懒加载先在页面中把需要延迟加载的图片统一使用一张占位图进行占位，把真正的路径存在元素“data-url”属性里。
2）页面加载完成后，通过scrollTop判断图片是否在用户的视野，如果在，则将 data-url的值取出来存放到src中。
3）在滚轮事件中重复判断图片是否进入视中，如果在，则将data-url的值取出来存放到src中。
demo
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <title>文字环绕</title> 7 8 <style type="text/css"> 9 img { 10 display: block; 11 } 12 13 #myBtn { 14 display: none; 15 position: fixed; 16 bottom: 20px; 17 right: 30px; 18 z-index: 99; 19 border: none; 20 outline: none; 21 background-color: red; 22 color: white; 23 cursor: pointer; 24 padding: 15px; 25 border-radius: 10px; 26 } 27 28 #myBtn:hover { 29 background-color: #555; 30 } 31 </style> 32 33 <body> 34 <div class="pic"></div> 35 <button onclick="topFunction()" id="myBtn" title="回顶部">返回顶部</button> 36 </body> 37 <script type="text/javascript"> 38 //加载的次数，初始化为 1 39 var count = 1; 40 //获取存放img标签的div，之后会把创建的img放进去 41 var pic = document.getElementsByClassName('pic')[0]; 42 arr = ['img/1.jpg', 'img/2.jpg', 'img/3.jpg', 'img/4.jpg', 'img/5.jpg', 'img/6.jpg', 'img/7.jpg', 'img/a.jpeg', 'img/b.jpeg', 'img/c.jpg', 'img/d.jpg', 'img/e.jpeg', 'img/f.png']; 43 for (var i = 0; i < arr.length; i++) { 44 var img = new Image(); 45 img.setAttribute('src-data', arr[i]); 46 img.setAttribute('class', 'image'); 47 pic.appendChild(img); 48 } 49 var image = document.getElementsByClassName('image'); 50 // console.log(image); 51 //初始化，第一次显示4张 52 for (var i = 0; i < 4; i++) { 53 image[i].setAttribute('src', image[i].getAttribute('src-data')); 54 } 55 // 滚动加载， 56 window.onscroll = function() { 57 //滚动条顶部到浏览器窗口顶部的距离，这里为什么要判断呢，是因为浏览器的兼容性问题 58 var scrollTop = (document.documentElement.scrollTop == 0 ? document.body.scrollTop : document.documentElement.scrollTop); 59 //当滚动条滚动的距离 + 浏览器可视窗口大小 >= 文档的高度 时加载 60 if (scrollTop + document.documentElement.clientHeight >= (document.documentElement.scrollHeight || document.body.scrollHeight)) { 61 62 if ((4 + count * 2) > arr.length) { 63 for (let i = (4 + (count - 1) * 2); i < arr.length; i++) { 64 image[i].setAttribute('src', image[i].getAttribute('src-data')); 65 } 66 } else { 67 let i = (4 + (count - 1) * 2); 68 for (i; i < (4 + count * 2); i++) { 69 image[i].setAttribute('src', image[i].getAttribute('src-data')); 70 } 71 count++; 72 // console.log(count) 73 } 74 } 75 //当网页向下滑动 20px 出现"返回顶部" 按钮 76 if (scrollTop > 20) { 77 document.getElementById("myBtn").style.display = "block"; 78 } else { 79 document.getElementById("myBtn").style.display = "none"; 80 } 81 } 82 // 点击按钮，返回顶部 83 function topFunction() { 84 document.body.scrollTop = 0; 85 document.documentElement.scrollTop = 0; 86 } 87 </script> 88 </html>